fileUpload.jsp 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  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 id="fileTpl" type="text/html">
  8. <div id="{{d.file.uid}}" class="row item list-item">
  9. <i class="fa fa-3x fa-file-pdf-o text-info col-sm-1 file-item"></i>
  10. <label class="col-sm-4 file-item" title="{{d.file.name}}" style="text-overflow:ellipsis; white-space:nowrap; overflow:hidden;">
  11. {{d.file.name}}
  12. </label>
  13. <p class="status col-sm-2 file-item "> {{d.file.status}}</p>
  14. <div class="col-sm-2"><p class="size file-item">{{d.file.size}}</p></div>
  15. <div class="col-sm-3">
  16. <i class="fa fa-check-circle fa-2x file-item pull-right fa-success"></i>
  17. <c:if test="${ readonly == false }">
  18. <a class="fa fa-minus-circle remove-this fa-2x file-item pull-right fa-danger" data-id="{{d.file.id}}"></a>
  19. </c:if>
  20. <a class="fa fa-cloud-download download-this fa-2x file-item pull-right text-info {{d.file.hide}}" data-url="{{d.file.url}}"></a>
  21. </div>
  22. </div>
  23. </script>
  24. <script type="text/javascript">
  25. // 添加全局站点信息
  26. var BASE_URL = '/webuploader';
  27. var uploadUrl = '${ctx}/sys/file/webupload/upload?uploadPath=${uploadPath}';
  28. var delFileUrl ='${ctx}/sys/file/webupload/delete?id=';
  29. var fileNumLimit = '${fileNumLimit}';
  30. var fileSizeLimit = '${fileSizeLimit}';
  31. var type = '${type}';
  32. var allowedExtensions = '${allowedExtensions}';
  33. var mimeTypes = '${mimeTypes}';
  34. function init($list) {
  35. var fileIds = "${fileIds}".split("|");
  36. var urls = "${fileValues}".split("|");
  37. var sizes = "${fileSizes}".split("|");
  38. var sum = 0;
  39. for (var i=0; i<urls.length; i++){
  40. if (urls[i]!=""){
  41. sum++ ;
  42. $(".file-desc").remove();
  43. var data = {
  44. file:{
  45. uid:"-1",
  46. name:decodeURIComponent(urls[i].substring(urls[i].lastIndexOf("/")+1)),
  47. status: '已上传',
  48. id:fileIds[i],
  49. url: urls[i],
  50. size: sizes[i],
  51. hide:""
  52. }
  53. }
  54. var fileTpl = $('#fileTpl').html(); //读取模版
  55. laytpl(fileTpl).render(data, function (render) {
  56. $list.append(render);
  57. });
  58. }
  59. }
  60. return sum;
  61. }
  62. function getUploadFileValues() {
  63. var list = $("#jeeplus_file_list .list-item .download-this");
  64. var files = [];
  65. for(var i=0; i < list.length; i++){
  66. files.push($(list[i]).attr("data-url"));
  67. }
  68. return files.join("|");
  69. }
  70. function getUploadFileNames() {
  71. var list = $("#jeeplus_file_list .list-item label");
  72. var files = [];
  73. for(var i=0; i < list.length; i++){
  74. files.push($(list[i]).text());
  75. }
  76. return files.join(",");
  77. }
  78. function getUploadFileSizes() {
  79. var list = $("#jeeplus_file_list .list-item p.size");
  80. var files = [];
  81. for(var i=0; i < list.length; i++){
  82. files.push($(list[i]).text());
  83. }
  84. return files.join(",");
  85. }
  86. </script>
  87. <link href="${ctxStatic}/plugin/webuploader-0.1.5/fileupload.css" rel="stylesheet" />
  88. <script src="${ctxStatic}/plugin/webuploader-0.1.5/fileupload.js"></script>
  89. </head>
  90. <body class="bg-white">
  91. <!--dom结构部分-->
  92. <div style="display: none">
  93. <input id="file001" type="file">
  94. </div>
  95. <div id="uploader" class="uploader">
  96. <c:if test="${ readonly == false }">
  97. <div class="btns">
  98. <div id="picker"><i class="fa fa-cloud-upload"></i> 添加文件</div>
  99. </div>
  100. </c:if>
  101. <!--用来存放文件信息-->
  102. <div id="jeeplus_file_list" class="uploader-list">
  103. <div class="file-desc">
  104. <p>上传文件到这里</p>
  105. </div>
  106. </div>
  107. </div>
  108. </body>
  109. </html>