您的位置:首页 > 编程语言 > Java开发

plupload上传插件在SpringMVC中的整合(JAVA 版)【一】

2014-07-19 10:06 459 查看
前言:最近在给学院的网站做一个添加附件的功能,首先到了某某邮箱看了一下,简单实用,但是是flash做的,无法拷贝,就只好上网找插件了。经过筛选,终于找到plupload这款插件(事实上有的编辑器自带添加附件功能)。官网只有PHP版本,后来各种百度谷歌,找到的资料都用点小问题,拼搏一天终于实现了功能,下面就把遇到的问题和重点部分写出来,希望遇到同样问题的同学可以参考。

首先你需要下载plupload插件,下载地址:http://www.plupload.com/download/

JSP页面配置如下:

<!-- 配置界面上的css -->
<link rel="stylesheet" type="text/css" href="<%=basePath%>plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css">
<script type="text/javascript" src="<%=basePath%>js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>plupload/js/plupload.full.min.js"></script>
<script type="text/javascript" src="<%=basePath%>plupload/js/jquery.plupload.queue/jquery.plupload.queue.js"></script>

<!-- 国际化中文支持 -->
<script type="text/javascript" src="<%=basePath%>plupload/js/i18n/zh_CN.js"></script>

<script type="text/javascript">
// Initialize the widget when the DOM is ready
$(function() {
// Setup html5 version
function plupload(){
$("#uploader").pluploadQueue({
// General settings
runtimes : 'flash,html5,gears,browserplus,silverlight,html4',
url : "<%=basePath%>upload",
//unique_names: true,
chunk_size : '1mb',
//rename : true,
dragdrop: true,
filters : {
// Maximum file size
max_file_size : '10mb',
// Specify what files to browse for
mime_types: [
{title : "Image files", extensions : "jpg,gif,png"},
{title : "Zip files", extensions : "zip"}
]
},
// Resize images on clientside if we can
resize: {
width : 200,
height : 200,
quality : 90,
crop: true
// crop to exact dimensions
},             // Flash settings
flash_swf_url : '<%=basePath%>plupload/js/Moxie.swf',
// Silverlight settings
silverlight_xap_url : '<%=basePath%>plupload/js/Moxie.xap' ,
// 参数
multipart_params: {'user': 'Rocky', 'time': '2012-06-12'}

});
}

plupload();

$('#Reload').click(function(){
plupload();
});
});

</script>

<div style="width:750px; margin:0px auto;">
<div id="uploader">
<p>您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5 .</p>
</div>
<input value="继续上传" id="Reload" type="button">
</div>
JS部分配置说明可以参考:http://www.douban.com/note/188007146/http://www.aixueit.com/thread-304-1-1.html,详细配置请自行百度或者查阅官网http://www.plupload.com。界面如下:

重点的就是后台了,在写后台前不得不说明一下plupload的大概工作原理:如果上传列表中存在文件大小大于chunk_size但是小于max_file_size的文件,那么plupload会将其分解成最大大小为chunk_size的几个小块(这可以绕过服务器设置的限制最大上传文件大小,另外进度条也会显示的合理),然后再将文件中的各个文件(包括分解后的小块)依次上传,这里的上传并不是一次性全部传给服务器,而是当一个文件上传完成后,再上传第二个文件,这样也很好的做了进度条的显示。当然了,在后台代码中,如果遇到分块的文件,必须对其进行合并。

先附上之前找的部分资料吧,http://www.rockydo.com/articleDetail.php?id=83 感觉挺好的,不过我使用commons-fileupload-1.2.2.jar方式上传的时候获取不到值(能实现的同学欢迎告诉我),所以后来就只好换种方式了,于是就看到了这篇文章http://stackoverflow.com/questions/16813907/apache-commons-file-upload-with-spring-mvc-and-plupload,使用MultiparFile方式上传,代码剪短,但是给了我不小的启发。好了,开始写我的思路吧。

为了更清楚的表达结构,我决定将重点处理代码写入一个PluploadUtil工具类,在配上一个Plupload Bean类,这样在调用时就方便多了。具体代码如下:

import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.Iterator;
import java.util.List;

import org.springframework.util.MultiValueMap;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

/**
* Plupload是一个上传插件。
* 上传原理为单个文件依次发送至服务器.
* 上传打文件时可以将其碎片化上传。但是一般情况下,不会这样做,
* 所以这里更多的是处理普通文件的批量上传。
* 这里主要处理文件上传
*/
public class PluploadUtil {
private static final int BUF_SIZE = 2 * 1024;
/**上传失败响应的成功状态码*/
public static final String RESP_SUCCESS = "{\"jsonrpc\" : \"2.0\", \"result\" : \"success\", \"id\" : \"id\"}";
/**上传失败响应的失败状态码*/
public static final String RESP_ERROR = "{\"jsonrpc\" : \"2.0\", \"error\" : {\"code\": 101, \"message\": \"Failed to open input stream.\"}, \"id\" : \"id\"}";

/**
* 用于Plupload插件的文件上传,自动生成唯一的文件保存名
* @param plupload - 存放上传所需参数的bean
* @param dir - 保存目标文件目录
* @throws IllegalStateException
* @throws IOException
*/
public static void upload(Plupload plupload, File dir) throws IllegalStateException, IOException {
//生成唯一的文件名
String filename = "" + System.currentTimeMillis() + plupload.getName();
upload(plupload, dir, filename);
}

/**
* 用于Plupload插件的文件上传
* @param plupload - 存放上传所需参数的bean
* @param dir - 保存目标文件目录
* @param filename - 保存的文件名
* @throws IllegalStateException
* @throws IOException
*/
public static void upload(Plupload plupload, File dir, String filename) throws IllegalStateException, IOException {
int chunks = plupload.getChunks();	//获取总的碎片数
int chunk = plupload.getChunk();	//获取当前碎片(从0开始计数)

System.out.println(plupload.getMultipartFile() + "----------");

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) plupload.getRequest();
MultiValueMap<String, MultipartFile> map = multipartRequest.getMultiFileMap();

if(map != null) {
if (!dir.exists()) dir.mkdirs();	//如果目标文件夹不存在则创建新的文件夹

//事实上迭代器中只存在一个值,所以只需要返回一个值即可
Iterator<String> iter = map.keySet().iterator();
while(iter.hasNext()) {
String str = (String) iter.next();
List<MultipartFile> fileList =  map.get(str);
for(MultipartFile multipartFile : fileList) {
//因为只存在一个值,所以最后返回的既是第一个也是最后一个值
plupload.setMultipartFile(multipartFile);

//创建新目标文件
File targetFile = new File(dir.getPath()+ "/" + filename);

//当chunks>1则说明当前传的文件为一块碎片,需要合并
if (chunks > 1) {
//需要创建临时文件名,最后再更改名称
File tempFile = new File(dir.getPath()+ "/" + multipartFile.getName());
//如果chunk==0,则代表第一块碎片,不需要合并
saveUploadFile(multipartFile.getInputStream(), tempFile, chunk == 0 ? false : true);

//上传并合并完成,则将临时名称更改为指定名称
if (chunks - chunk == 1) {
tempFile.renameTo(targetFile);
}

} else {
//否则直接将文件内容拷贝至新文件
multipartFile.transferTo(targetFile);
}
}
}
}

}

/**
* 保存上传文件,兼合并功能
*/
private static void saveUploadFile(InputStream input, File targetFile, boolean append) throws IOException {
OutputStream out = null;
try {
if (targetFile.exists() && append) {
out = new BufferedOutputStream(new FileOutputStream(targetFile, true), BUF_SIZE);
} else {
out = new BufferedOutputStream(new FileOutputStream(targetFile), BUF_SIZE);
}

byte[] buffer = new byte[BUF_SIZE];
int len = 0;
//写入文件
while ((len = input.read(buffer)) > 0) {
out.write(buffer, 0, len);
}
} catch (IOException e) {
throw e;
} finally {
//关闭输入输出流
if (null != input) {
try {
input.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if (null != out) {
try {
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}

/**
* 判断是否全部上传完成
* 碎片需合并后才返回真
*/
public static boolean isUploadFinish(Plupload plupload) {
return (plupload.getChunks() - plupload.getChunk() == 1);
}

}


import javax.servlet.http.HttpServletRequest;

import org.springframework.web.multipart.MultipartFile;

/**
* Plupload是一个上传插件。
* 这是一个bean类,主要存储Plupload插件上传时需要的参数。
* 属性名不可随意改动.
* 这里主要使用MultipartFile文件上传方法
*/
public class Plupload {

/**文件临时名(打文件被分解时)或原名*/
private String name;
/**总的块数*/
private int chunks = -1;
/**当前块数(从0开始计数)*/
private int chunk = -1;
/**HttpServletRequest对象,不能直接传入进来,需要手动传入*/
private HttpServletRequest request;
/**保存文件上传信息,不能直接传入进来,需要手动传入*/
private MultipartFile multipartFile;

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public int getChunks() {
return chunks;
}

public void setChunks(int chunks) {
this.chunks = chunks;
}

public int getChunk() {
return chunk;
}

public void setChunk(int chunk) {
this.chunk = chunk;
}

public HttpServletRequest getRequest() {
return request;
}

public void setRequest(HttpServletRequest request) {
this.request = request;
}

public MultipartFile getMultipartFile() {
return multipartFile;
}

public void setMultipartFile(MultipartFile multipartFile) {
this.multipartFile = multipartFile;
}

}


最后就是测试类了,这部分不是重点,比较粗糙
import java.io.File;
import java.io.IOException;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class uploadAction {
public static final String FileDir = "uploadfile/";

/**上传界面*/
@RequestMapping("/uploadui")
public String uploadUI() {

return "login.upload";
}

/**上传处理方法*/
@RequestMapping(value="/upload", method = RequestMethod.POST)
public String upload(Plupload plupload,HttpServletRequest request, HttpServletResponse response) {

//System.out.println(plupload.getChunk() + "===" + plupload.getName() + "---" + plupload.getChunks());

plupload.setRequest(request);
//文件存储路径
File dir = new File(plupload.getRequest().getSession().getServletContext().getRealPath("/") + FileDir);

System.out.println(dir.getPath());

try {
//上传文件
PluploadUtil.upload(plupload, dir);
//判断文件是否上传成功(被分成块的文件是否全部上传完成)
if (PluploadUtil.isUploadFinish(plupload)) {
System.out.println(plupload.getName() + "----");
}

} catch (IllegalStateException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

return "login.upload";
}
}
好了,到此重点部分的工作算是完成了,需要提醒一下的就是,在前台JS部分有一个rename参数,如果设置成true,后台就获取不到文件的真实名称了,后台获取真实名称也不在是MultipartFile的getOriginalFilename()方法了,因为被分块的文件名称会改变,而需要使用Plupload.getName()获取。

附上上传成功界面图(这里把设置的文件是没有限制):

至于后面的如何将状态码以JOSN形式返回与前台进行交互和文件大小一次性上传大小的限制,就在往后用到了在详述吧。

以上观点均为个人意见,欢迎指正与批评。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: