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

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

1、多图片上传

前端JSP

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML>

<head>

</head>

<tbody>

<tr>

</div>

</div>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</tbody>

</table>

$(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();

}

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

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