user-avatar-input.jsp 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <%@page contentType="text/html;charset=UTF-8"%>
  2. <%@include file="/taglibs.jsp"%>
  3. <%pageContext.setAttribute("currentHeader", "user");%>
  4. <%pageContext.setAttribute("currentMenu", "user");%>
  5. <!doctype html>
  6. <html>
  7. <head>
  8. <%@include file="/common/meta.jsp"%>
  9. <title><spring:message code="user.user.input.title" text="编辑用户"/></title>
  10. <%@include file="/common/s.jsp"%>
  11. <link rel="stylesheet" href="${ctx}/s/jquery-file-upload/css/jquery.fileupload.css">
  12. <script src="${ctx}/s/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
  13. <script src="${ctx}/s/jquery-file-upload/js/jquery.iframe-transport.js"></script>
  14. <script src="${ctx}/s/jquery-file-upload/js/jquery.fileupload.js"></script>
  15. <script type="text/javascript">
  16. function generateFileupload(maxLimitedSize) {
  17. $('.fileupload').fileupload({
  18. dataType: 'json',
  19. add: function (e, data) {
  20. var file = data.files[0];
  21. if (file.size > maxLimitedSize) {
  22. alert("图片过大");
  23. } else {
  24. data.submit();
  25. }
  26. },
  27. submit: function (e, data) {
  28. var $this = $(this);
  29. data.jqXHR = $this.fileupload('send', data);
  30. $(this).parent('.btn').attr('disabled', true);
  31. $(this).parent('.btn').removeClass('btn-success');
  32. return false;
  33. },
  34. done: function (e, data) {
  35. var id = data.result.id;
  36. var imgId = data.formData.imgId;
  37. var btnId = data.formData.btnId;
  38. var viewUrl = data.formData.viewUrl + id + '&_=' + new Date().getTime();
  39. $("#" + imgId).html('<img src="' + viewUrl + '" style="width:512px;">');
  40. $('#' + btnId).attr('disabled', false);
  41. $('#' + btnId).addClass('btn-success');
  42. },
  43. progressall: function (e, data) {
  44. var progress = parseInt(data.loaded / data.total * 100, 10);
  45. $('#progress .bar').css(
  46. 'width',
  47. progress + '%'
  48. ).html(progress + '%');
  49. }
  50. });
  51. }
  52. $(function () {
  53. generateFileupload(1024 * 1024);
  54. });
  55. </script>
  56. </head>
  57. <body>
  58. <%@include file="/header/user.jsp"%>
  59. <div class="row-fluid">
  60. <%@include file="/menu/user.jsp"%>
  61. <!-- start of main -->
  62. <section id="m-main" class="span10">
  63. <article class="m-widget">
  64. <header class="header">
  65. <h4 class="title"><spring:message code="user.user.input.title" text="编辑用户"/></h4>
  66. </header>
  67. <div class="content content-inner">
  68. <form id="userBaseForm" method="post" action="user-avatar-crop.do" class="form-horizontal">
  69. <input id="userBase_id" type="hidden" name="id" value="${userBase.id}">
  70. <div class="control-group">
  71. <label class="control-label" for="userBase_avatar">头像</label>
  72. <div class="controls">
  73. <div id="avatarImage">
  74. <c:if test="${not empty userBase.avatar}">
  75. <img src="user-base-avatar.do?id=${userBase.id}" style="width:512px;">
  76. </c:if>
  77. </div>
  78. <div id="avatarButton" class="btn btn-success fileinput-button">
  79. <span>上传一个新图片</span>
  80. <input type="file" name="avatar" class="fileupload"
  81. data-no-uniform="true"
  82. data-url="user-avatar-upload.do"
  83. data-form-data='{"id":"${userBase.id}","imgId":"avatarImage","btnId":"avatarButton","viewUrl":"user-avatar-view.do?id="}'>
  84. </div>
  85. <div id="progress" class="progress" style="width:200px;margin-top:5px;height:20px;margin-bottom:0px;">
  86. <div class="bar bar-success"></div>
  87. </div>
  88. </div>
  89. </div>
  90. <div class="control-group">
  91. <div class="controls">
  92. <button id="submitButton" class="btn a-submit">确认</button>
  93. </div>
  94. </div>
  95. </form>
  96. </div>
  97. </article>
  98. </section>
  99. <!-- end of main -->
  100. </div>
  101. </body>
  102. </html>