fileUpload.jsp 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <%@ page contentType="text/html;charset=UTF-8" %>
  2. <%@ include file="/webpage/include/taglib.jsp"%>
  3. <html>
  4. <head>
  5. <title>文件管理管理</title>
  6. <meta name="decorator" content="ani"/>
  7. <script type="text/javascript">
  8. // 添加全局站点信息
  9. var BASE_URL = '/webuploader';
  10. var uploadUrl = '${ctx}/sys/file/webupload/upload?uploadPath=${uploadPath}';
  11. var delFileUrl ='${ctx}/sys/file/webupload/delete?id=';
  12. var fileNumLimit = '${fileNumLimit}';
  13. var fileSizeLimit = '${fileSizeLimit}';
  14. var type = '${type}';
  15. var allowedExtensions = '${allowedExtensions}';
  16. var mimeTypes = '${mimeTypes}';
  17. function init($list) {
  18. <%--var urls = "${fileValues}".split("|");--%>
  19. var fileIds = "${fileIds}".split("|");
  20. var urls = "${fileValues}".split("|");
  21. var sum = 0;
  22. for (var i=0; i<urls.length; i++){
  23. if (urls[i]!=""){
  24. sum++ ;
  25. $(".file-desc").remove();
  26. $list.append('<div class="row item list-item">'
  27. +'<i class="fa fa-3x fa-file-pdf-o text-info col-sm-1 file-item"></i>'
  28. +'<h5 class="info col-sm-5">'
  29. +'<label style="width: 200px; margin-top: 6px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden;">'+decodeURIComponent(urls[i].substring(urls[i].lastIndexOf("/")+1))+'</label>'
  30. + '</h5>'
  31. +' <p class="state col-sm-3 fa-success" style="margin-top: 15px">已上传</p>'
  32. + '<div class="col-sm-3 ">'
  33. + '<i class="fa fa-check-circle fa-2x file-item pull-right fa-success"></i>'
  34. <c:if test="${ readonly == false }">
  35. + '<a class="fa fa-minus-circle remove-this fa-2x file-item pull-right fa-danger" data-id="'+fileIds[i]+'"></a>'
  36. </c:if>
  37. + '<a class="fa fa-cloud-download download-this fa-2x file-item pull-right text-info" data-url="'+urls[i]+'"></a>'
  38. + '</div>'
  39. + '</div>')
  40. }
  41. }
  42. return sum;
  43. }
  44. function getUploadFileValues() {
  45. var list = $("#jeeplus_file_list .list-item .download-this");
  46. var files = [];
  47. for(var i=0; i < list.length; i++){
  48. files.push($(list[i]).attr("data-url"));
  49. }
  50. return files.join("|");
  51. }
  52. function getUploadFileNames() {
  53. var list = $("#jeeplus_file_list .list-item label");
  54. var files = [];
  55. for(var i=0; i < list.length; i++){
  56. files.push($(list[i]).text());
  57. }
  58. return files.join(",");
  59. }
  60. </script>
  61. <link href="${ctxStatic}/plugin/webuploader-0.1.5/fileupload.css" rel="stylesheet" />
  62. <script src="${ctxStatic}/plugin/webuploader-0.1.5/fileupload.js"></script>
  63. </head>
  64. <body class="bg-white">
  65. <!--dom结构部分-->
  66. <div style="display: none">
  67. <input id="file001" type="file">
  68. </div>
  69. <div id="uploader" class="uploader">
  70. <c:if test="${ readonly == false }">
  71. <div class="btns">
  72. <div id="picker"><i class="fa fa-cloud-upload"></i> 添加文件</div>
  73. <%--<button id="ctlBtn" class="btn btn-default">开始上传</button>--%>
  74. </div>
  75. </c:if>
  76. <!--用来存放文件信息-->
  77. <div id="jeeplus_file_list" class="uploader-list">
  78. <div class="file-desc">
  79. <p>上传文件到这里</p>
  80. </div>
  81. </div>
  82. </div>
  83. </body>
  84. </html>