[整理]WebUploader + SpringMVC 实现多文件断点续传之一多文件上传

最新推荐文章于 2024-09-29 17:59:26 发布

码YouMe

最新推荐文章于 2024-09-29 17:59:26 发布

阅读量2.4k

点赞数

分类专栏：前端后端文章标签： WebUploader Spring MVC

本文链接：https://blog.csdn.net/macau2008/article/details/78594456

版权

后端同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

PM要做一个文件上传的Web需要支持大文件断点续传，调查了一下决定使用Baidu的WebUploader控件实现。

1、多图片上传

前端JSP

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html style="height: 99%; width: 99.9%">
    <head>
        <title>文件上传</title>
        <link rel="stylesheet" href="${ctx}/js/webuploader-0.1.5/webuploader.css" />
        <script src="${ctx}/js/jquery-ui-1.11.1/jquery-ui.min.js"></script>
        <script src="${ctx}/js/webuploader-0.1.5/webuploader.js"></script>
    </head>
    <body class="div-form-container">
        <table class="upload">
            <tbody>
                <tr>
                    <td height="200px">
                        <div id="uploader-container" style="width: 100%">
                            <div id="fileList" class="uploader-list">
                            </div>
                            <div id="upInfo"></div>
                            <div id="filePicker">选择文件</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" class="btnSave" id="btnUpload" value="上传"/>
                        <input type="button" class="btnSave" id="btnReset" value="重置"/>
                        <input type="button" class="btnSave" value="取消" οnclick="javascript:closeDialog();"/>
                    </td>
                </tr>
            </tbody>
        </table>
        <script type="text/javascript">
        $(function() {
            var $maxSingleSize = 10*1024*1024, // 单个文件最大10M
            $maxSize = 10081024*1024; // 所有文件最大100M
            var $list = $('#fileList'),
            uploader; // Web Uploader实例
            // 初始化Web Uploader
            uploader = WebUploader.create({
                auto : false, // 手动上传
                swf : '${ctx}/js/webuploader-0.1.5/Uploader.swf',
                server : '${ctx}/fileUpload/upload', // 文件接收服务端
                threads : 3, // 同时运行3个线程传输
                duplicate : false, // 是否重复上传（单次选择同样的文件）
                fileNumLimit : 10, // 文件总数量 
                fileSingleSizeLimit : $maxSingleSize, // 单个文件大小限制 10M
                fileSizeLimit : $maxSize, // 文件总大小限制 100M
                pick : {
                    id : '#filePicker', // 选择文件的按钮
                    multiple : true // 允许可以同时选择多个文件
                },
                compress : false, // 不压缩文件
                accept : {
                    extensions: "txt,gif,jpg,jpeg,bmp,png,zip,rar,war,pdf,cebx,doc,docx,ppt,pptx,xls,xlsx",
                    mimeTypes: '.txt,.gif,.jpg,.jpeg,.bmp,.png,.zip,.rar,.war,.pdf,.cebx,.doc,.docx,.ppt,.pptx,.xls,.xlsx',
                }
            });

            // 当有文件添加进来的时候 
            uploader.on('fileQueued', function(file) {
                var $li = $('<div id="' + file.id + '" class="file-item">'
                        + '<span class="info">' + file.name + '</span>'
                        + '<span class="state">等待上传</span>'
                        + '</div>');
                $list.append($li);
            });            
            // 上传中
            uploader.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id);
                var $state = $li.find('span.state');
                $state.html("<font color='#330033'>上传中...</font>");
            });
            // 文件上传成功
            uploader.on('uploadSuccess', function(file, response) {
                var $li = $('#' + file.id);
                var $state = $li.find('span.state');
                $state.html("<font color='green'>上传成功！</font>");
            });
            // 文件上传失败
            uploader.on('uploadError', function(file, code) {
                var $li = $('#' + file.id);
                var $state = $li.find('span.state');
                $state.html("<font color='red'>上传失败！</font>");
            });
            // 手动上传
            $("#btnUpload").click(function() {
                // 执行上传操作
                uploader.upload();
            });            
            // 重置
            $("#btnReset").click(function() {
                // 清空文件列表，重置上传控件
                $list.html('');
                uploader.reset();
            });
        });
    </script>
    </body>
</html>

后端Controller

import java.io.File;
import java.io.IOException;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
@Controller
@RequestMapping(value = "/fileUpload")
public class FileUploadController extends BaseController {
    /** 日志记录 */
    private static Logger logger = Logger.getLogger(FileUploadController.class);
   
    /**
     * 保存上传文件
     * 
     * @Title: upload
     * @Description: 保存前端使用Webuploader未进行分片处理上传的文件
     * @param request HttpServletRequest
     * @param response HttpServletResponse
     * @param session HttpSession
     */
    @RequestMapping(value = "/upload")
    public void upload(HttpServletRequest request, HttpServletResponse response, HttpSession session) {
        

        // 获得文件保存目录
        String savePath = ""; // 这里是你要保存文件的目录

        // 转换请求对象得到文件对象
        MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest) request;
        Map<String, MultipartFile> files = Murequest.getFileMap();

        String fileName;
        File tagetFile;

        // 获得文档保存目录
        File dir = new File(savePath);
        if (!dir.exists()) {
            dir.mkdirs();
        }

        // 保存文档
        for (MultipartFile file : files.values()) {
            fileName = file.getOriginalFilename();
            // 创建文件对象
            tagetFile = new File(savePath + File.separator + fileName);
            // 目标文件创建
            if (!tagetFile.exists()) {
                try {
                    tagetFile.createNewFile();
                } catch (IOException e) {
                    logger.error("创建目标文件时出错：" + e.getMessage());
                    e.printStackTrace();
                }
            }

            // 保存文件
            try {
                file.transferTo(tagetFile);
            } catch (IllegalStateException e) {
                logger.error("复制时出错：" + e.getMessage());
                e.printStackTrace();
            } catch (IOException e) {
                logger.error("复制时出错：" + e.getMessage());
                e.printStackTrace();
            }
        }
    }
}