WebUploader+SpringMVC 完成前端文件分片上传与后台分片文件合并

最新推荐文章于 2022-11-21 07:03:38 发布

一个名字很长很长很长的JAVA工程师

最新推荐文章于 2022-11-21 07:03:38 发布

阅读量1.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： WebUploader 文章标签： WebUploader SpringMVC 文件上传

本文链接：https://blog.youkuaiyun.com/wzsy_ll/article/details/97274139

这篇博客介绍了如何结合WebUploader前端组件和SpringMVC后端框架，实现文件的分片上传以及在服务器端进行分片文件的合并。作者在文中详细阐述了上传的大致流程，并提供了前端及后端的关键代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近看了WebUploader文件上传组件,功能很强大但是官方的文档是给我看吐了。

废了好几头牛的力气终于写了一篇Demo,分享一下也方便以后自己查看

大致上传流程

代码

因为是篇Demo,所以可能有很多不足的地方,代码我都标记了注释

去官网下载WebUploader的包

WebUploader官网

还需要引入jQuery.js

下面是前端代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    //取得当前Web应用的名称
    String basepath = request.getContextPath();
%>
<html>
<head>
    <title>单文件上传测试页面</title>
    <link href="<%=basepath%>/css/webuploader.css"  rel="stylesheet" type="text/css" >
    <link href="<%=basepath%>/css/bootstrap-3.1.1.min.css" rel='stylesheet' type='text/css' />
    <script src="<%=basepath%>/js/jquery.min.js"></script>
    <script src="<%=basepath%>/js/webuploader.js"></script>
    <style>
        body{
            text-align: center;
        }
        #drag{
            margin-left: auto;
            margin-right: auto;
            width: 400px;
            height: auto;
            background-color: #CCCCCC;
            border-radius:25px;
        }
        .uploadText{
            padding-top: 30%;
        }

    </style>
</head>
<body>
   <h1>单文件上传测试</h1>
   <div id="drag" class="wu-example">
       <img src="<%=basepath%>/icon/uploadImg.png" style="width:85px;height: 69px;position: relative;top: 100px">
       <p class="uploadText">将文件拖拽到此处进行上传</p>
       <!-- 回显图片 -->
       <div id="listImg"></div>
       <div id="btns">
           <div id="picker">选择文件</div>
           <button id="ctlBtn" class="btn btn-default" onclick="fileUpload()">开始上传</button>
           <input type="hidden" id="fileStatus" value="wait">
           <button class="btn btn-default" onclick="fileReset()">重置文件</button>
       </div>
   </div>
</body>
<script>

    var mydate = new Date();
    //唯一ID
    var uuid = "lcl"+m