多文件上傳實戰：Spring MVC + Plupload + artDialog 打造現代化上傳體驗

技術棧與效果

• 後端：Spring MVC + MyBatis + MySQL
• 前端：Plupload（分塊/斷點/多選）+ artDialog（彈窗）+ jQuery
• 功能：多文件佇列、進度條、拖拽、分類關聯、下載/刪除

前端整合

引入資源

<link rel="stylesheet" href="resources/css/plupload.css">
<script src="resources/js/jquery.min.js"></script>
<script src="resources/upload/plupload.full.min.js"></script>
<script src="resources/artDialog4.1.7/artDialog.source.js?skin=blue"></script>
<script src="resources/js/upload.js"></script>  <!-- 封裝初始化邏輯 -->

頁面結構

<a id="uploadBtn" class="optionbtn inline" href="#">文件上傳</a>
<div id="uploadContent" style="display:none;">
  <div id="choosefile"><span>單文件 < 100MB</span><br/><a id="uploadify" href="javascript:void(0);">選擇文件</a></div>
  <div id="uploadfileQueue"></div>  <!-- 上傳佇列自動渲染 -->
</div>

初始化調用

$(function() {
    $('#uploadBtn').click(function() { popUpDialog(); });  // artDialog 彈窗
    _plupload('test', '${pageContext.request.contextPath}/uploadfile');
    // 參數 1：業務標識（如用戶 ID），用於關聯文件
    // 參數 2：上傳接口地址
});

後端控制器

@RequestMapping("uploadfile")
public void upload(HttpServletRequest request, HttpServletResponse response) {
    MultipartHttpServletRequest mpReq = (MultipartHttpServletRequest) request;
    CommonsMultipartFile file = (CommonsMultipartFile) mpReq.getFile("file");

    String unid = UUID.randomUUID().toString().replace("-", "");
    String origName = file.getOriginalFilename();
    String size = String.valueOf(file.getSize());
    String punid = request.getParameter("punid"); // 業務關聯 ID

    // 存儲路徑：/uploadfile/年/月/日/unid/原文件名
    String base = request.getSession().getServletContext().getRealPath("/uploadfile");
    String sub = new SimpleDateFormat("/yyyy/MM/dd/").format(new Date());
    File dest = new File(base + sub + unid + File.separator + origName);
    dest.getParentFile().mkdirs();
    file.transferTo(dest);

    // 文件大小人性化
    String humanSize = humanReadableSize(Long.parseLong(size));

    // 入庫
    FileUpload fu = new FileUpload();
    fu.setUnid(unid); fu.setOriginalFilename(origName); fu.setFlieSize(humanSize);
    fu.setPath(dest.getAbsolutePath()); fu.setPunid(punid);
    fu.setFlieTime(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()));
    fileUploadService.insert(fu);
}

private String humanReadableSize(long bytes) {
    long kb=1024, mb=kb*1024, gb=mb*1024;
    if (bytes >= gb) return String.format("%.1f GB", (float)bytes/gb);
    if (bytes >= mb) return String.format("%.1f MB", (float)bytes/mb);
    if (bytes >= kb) return String.format("%.1f KB", (float)bytes/kb);
    return bytes + " B";
}

文件下載（流式輸出）

@RequestMapping("downloadfile")
public void download(HttpServletRequest req, HttpServletResponse resp) {
    FileUpload fu = fileUploadService.selectByPrimaryKey(req.getParameter("unid"));
    if (fu == null) return;
    resp.setCharacterEncoding("utf-8");
    resp.setContentType("application/octet-stream");
    resp.setHeader("Content-Disposition", "attachment;fileName=" +
        new String(fu.getOriginalFilename().getBytes("GBK"), "ISO-8859-1"));
    try (InputStream in = new FileInputStream(fu.getPath());
         OutputStream out = resp.getOutputStream()) {
        byte[] buf = new byte[2048];
        int len;
        while ((len = in.read(buf)) > 0) out.write(buf, 0, len);
    } catch (IOException e) { e.printStackTrace(); }
}

文件刪除（物理 + 數據庫）

@ResponseBody @RequestMapping("delfile")
public Map del(HttpServletRequest req) {
    String unid = req.getParameter("unid");
    FileUpload fu = fileUploadService.selectByPrimaryKey(unid);
    boolean ok = false;
    if (fu != null) {
        File f = new File(fu.getPath());
        if (f.exists()) ok = f.delete();
        if (fileUploadService.deleteByPrimaryKey(unid) > 0) ok = true;
    }
    return Collections.singletonMap("result", ok);
}

資源下載

完整前端插件包（Plupload + artDialog + 封裝 JS）：
百度網盤 提取碼：btqj

擴展建議

• 大文件分片上傳：Plupload 內建 chunk_size 參數，後端需合併分片。
• 雲存儲對接：將 transferTo 替換為 OSS SDK 上傳，路徑存 ObjectKey。
• 權限控攝：攔截器校驗 punid 歸屬當前用戶。