【_ 記 】topjui 多文件上傳 （代碼）

topjui 多文件上傳

---

頁面展示：

---

topjui代碼：

<div class="topjui-row">
         <div class="topjui-col-sm12">
            <label class="topjui-form-label">文件上傳</label>
            <div class="topjui-input-block">
            <div class="layui-upload">
               <a href="javascript:void(0)"
                  data-toggle="topjui-menubutton"
                  data-options="iconCls:'fa fa-search',btnCls:'topjui-btn-blue'" id="SelectList">選擇多文件</a>

<%--               <a href="javascript:void(0)"--%>
<%--                  data-toggle="topjui-menubutton"--%>
<%--                  data-options="iconCls:'fa fa-folder',btnCls:'topjui-btn-purple'" id="ListAction">開始上傳</a>--%>
                  <div class="layui-upload-list">
                     <table class="layui-table" lay-size="sm" style="table-layout: fixed">
                        <thead>
                        <tr>
                           <th>
                              文件名
                           </th>
                           <th>
                              大小
                           </th>
                           <th>
                              狀態
                           </th>
                           <th>
                              操作
                           </th>
                        </tr>
                        </thead>
                        <tbody id="FileList">
                        </tbody>
                     </table>
                  </div>
            </div>
            </div>
         </div>
      </div>

javascript

<script type="text/javascript">
   layui.use('upload', function () {
      var $ = layui.jquery,
            upload = layui.upload;
      //多文件列表
      var FileListView = $('#FileList'),
            uploadListIns = upload.render({
               elem: '#SelectList',
               url: 'xxxx',
               accept: 'file',
               multiple: true,
               auto: false,
               choose: function (obj) {
                  var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊列
                  //讀取本地文件
                  obj.preview(function (index, file, result) {
                     var tr = $(['<tr id="upload-' + index + '">', '<td width="35%" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap">' + file.name + '</td>', '<td class="filePathArray" width="50px" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap">' + (file.size / 1014).toFixed(1) + 'kb</td>', '<td width="5%" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap">等待上傳</td>', '<td width="10%" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap">', '<button class="layui-btn layui-btn-xs demo-reload" id="uploadOne-' + index + '">上傳</button>', '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">刪除</button>', '</td>', '</tr>'].join(''));
                     //單個重傳
                     tr.find('.demo-reload').on('click', function () {
                        obj.upload(index,file);
                        return false;
                     });
                     //刪除
                     tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //刪除對應的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免刪除後出現同名文件不可選
                     });
                     FileListView.append(tr);
                  });
               }, done: function (res, index, upload) {
                  if (res.statusCode == 200) { //上傳成功
                     var tr = FileListView.find('tr#upload-' + index),
                           tds = tr.children();
                     tds.eq(2).html('<span style="color: #5FB878;">上傳成功</span>');
                     tds.eq(1).html(res.filePath); //清空操作
                     tds.eq(1).attr("title",res.filePath);
                     tds.eq(3).html('');
                     return delete this.files[index]; //刪除文件隊列已經上傳成功的文件
                  }
                  this.error(index, upload);
               },
               allDone: function(obj){ //當文件全部被提交後，才觸發

               },
               error: function (index, upload) {
                  var tr = FileListView.find('tr#upload-' + index),
                        tds = tr.children();
                  tds.eq(2).html('<span style="color: #FF5722;">上傳失敗</span>');
                  tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //顯示重傳
               }
            });
   });
</script>

控制層代碼

public Result update(){
   
    String path=queryOneSystemConfigInfo.getConfigValue()+File.separator+new SimpleDateFormat("yyyyMM").format(new Date())+File.separator+ UUID.randomUUID().toString()+File.separator;
    String attachmentCode = this.request.getParameter("attachmentCode");
    if(attachmentCode.isEmpty()){
        Result mResult = new Result();
        mResult.setStatusCode(300);
        mResult.setTitle("操作失敗！");
        mResult.setMessage("請正確選擇上傳的附件！");
        return mResult;
    }
    File dirname = new File(path);
    if (!dirname.isDirectory()) {
        dirname.mkdirs();
    }
    String newFileName = "";
    try {
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
        if (multipartResolver.isMultipart(request)) {
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
            Iterator<String> iter = multiRequest.getFileNames();
            while (iter.hasNext()) {
                MultipartFile file = multiRequest.getFile(iter.next());
                if (file != null) {
                    String fileName = file.getOriginalFilename();
                    if (!file.isEmpty()) {
                        attachmentCode = fileName.substring(0,fileName.lastIndexOf("."));
                        newFileName =attachmentCode+fileName.substring(fileName.lastIndexOf("."));
                        newFileName = newFileName.replace(" ","");
                        try {
                            FileOutputStream fos = new FileOutputStream(path + File.separator + newFileName);
                            InputStream in = file.getInputStream();
                            int b = 0;
                            while ((b = in.read()) != -1) {
                                fos.write(b);
                            }
                            fos.close();
                            in.close();
                        } catch (Exception e) {
                            Result mResult = new Result();
                            mResult.setStatusCode(300);
                            mResult.setTitle("操作失敗");
                            mResult.setMessage("對不起，文件上傳失敗！");
                            return mResult;
                        }
                    }
                }
            }
        }
        Result mResult = new Result();
        mResult.setStatusCode(200);
        mResult.setTitle("操作提示");
        mResult.setMessage("文件上傳成功");
        mResult.setFilePath(path+newFileName);
        return mResult;
    } catch (Exception e) {
        Result mResult = new Result();
        mResult.setStatusCode(300);
        mResult.setTitle("操作失敗");
        mResult.setMessage("對不起，文件上傳失敗！");
        return mResult;
    }
}