userphoto_edit.jsp 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  4. <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
  5. <%
  6. String path = request.getContextPath();
  7. String basePath = request.getScheme() + "://"
  8. + request.getServerName() + ":" + request.getServerPort()
  9. + path + "/";
  10. %>
  11. <!DOCTYPE html>
  12. <html lang="en">
  13. <head>
  14. <base href="<%=basePath%>">
  15. <!-- jsp文件头和头部 -->
  16. <%@ include file="../index/top.jsp"%>
  17. <script type="text/javascript" src="plugins/photoEditor/scripts/swfobject.js"></script>
  18. <script type="text/javascript" src="plugins/photoEditor/scripts/fullAvatarEditor.js"></script>
  19. </head>
  20. <body class="no-skin">
  21. <!-- /section:basics/navbar.layout -->
  22. <div class="main-container" id="main-container">
  23. <!-- /section:basics/sidebar -->
  24. <div class="main-content">
  25. <div class="main-content-inner">
  26. <div class="page-content">
  27. <div class="row">
  28. <div class="col-xs-12">
  29. <div style="width:632px;margin: 0 auto;text-align:center">
  30. <h1 style="text-align:center">用户头像编辑</h1>
  31. <div>
  32. <p id="swfContainer">
  33. 本组件需要安装Flash Player后才可使用,请从<a href="http://www.adobe.com/go/getflashplayer">这里</a>下载安装。
  34. </p>
  35. </div>
  36. <!-- <button type="button" id="upload" style="display:none;margin-top:8px;">swf外定义的上传按钮,点击可执行上传保存操作</button>-->
  37. </div>
  38. <script type="text/javascript">
  39. swfobject.addDomLoadEvent(function () {
  40. var swf = new fullAvatarEditor("plugins/photoEditor/fullAvatarEditor.swf","plugins/photoEditor/expressInstall.swf", "swfContainer", {
  41. id : 'swf',
  42. upload_url : '<%=basePath%>plugins/photoEditor/upload.jsp?userid=999', //上传接口
  43. method : 'post', //传递到上传接口中的查询参数的提交方式。更改该值时,请注意更改上传接口中的查询参数的接收方式
  44. src_upload : 2, //是否上传原图片的选项,有以下值:0-不上传;1-上传;2-显示复选框由用户选择
  45. avatar_box_border_width : 0,
  46. avatar_sizes : '100*100|50*50|32*32',
  47. avatar_sizes_desc : '100*100像素|50*50像素|32*32像素'
  48. }, function (msg) {
  49. switch(msg.code)
  50. {
  51. case 1 : break;
  52. case 2 :
  53. //document.getElementById("upload").style.display = "inline";
  54. break;
  55. case 3 :
  56. if(msg.type == 0)
  57. {
  58. //alert("摄像头已准备就绪且用户已允许使用。");
  59. }
  60. else if(msg.type == 1)
  61. {
  62. alert("摄像头已准备就绪但用户未允许使用!");
  63. }
  64. else
  65. {
  66. alert("摄像头被占用!");
  67. }
  68. break;
  69. case 5 :
  70. if(msg.type == 0)
  71. {
  72. if(msg.content.sourceUrl)
  73. {
  74. //alert("原图已成功保存至服务器,url为:\n" + msg.content.sourceUrl+"\n\n" + "头像已成功保存至服务器,url为:\n" + msg.content.avatarUrls.join("\n\n")+"\n\n");
  75. savePhoto(msg.content.sourceUrl+",fh,"+msg.content.avatarUrls.join(",fh,"),"1");
  76. }
  77. else
  78. {
  79. //alert("头像已成功保存至服务器,url为:\n" + msg.content.avatarUrls.join("\n\n")+"\n\n");
  80. savePhoto(msg.content.avatarUrls.join(",fh,"),"2");
  81. }
  82. }
  83. break;
  84. }
  85. }
  86. );
  87. document.getElementById("upload").onclick=function(){
  88. swf.call("upload");
  89. };
  90. });
  91. var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
  92. document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F5f036dd99455cb8adc9de73e2f052f72' type='text/javascript'%3E%3C/script%3E"));
  93. </script>
  94. </div>
  95. <!-- /.col -->
  96. </div>
  97. <!-- /.row -->
  98. </div>
  99. <!-- /.page-content -->
  100. </div>
  101. </div>
  102. <!-- /.main-content -->
  103. <!-- 返回顶部 -->
  104. <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
  105. <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
  106. </a>
  107. </div>
  108. <!-- /.main-container -->
  109. <!-- basic scripts -->
  110. <!-- 页面底部js¨ -->
  111. <%@ include file="../index/foot.jsp"%>
  112. <!-- ace scripts -->
  113. <script src="static/ace/js/ace/ace.js"></script>
  114. <script type="text/javascript">
  115. $(top.hangge());
  116. //头像保存到数据库
  117. function savePhoto(value,type){
  118. $.ajax({
  119. type: "POST",
  120. url: '<%=basePath%>userphoto/save.do?tm='+new Date().getTime(),
  121. data: {strphotos:value,type:type},
  122. dataType:'json',
  123. cache: false,
  124. success: function(data){
  125. top.updateUserPhoto(data.userPhoto);
  126. top.Dialog.close();
  127. }
  128. });
  129. }
  130. </script>
  131. </body>
  132. </html>