标签:
前言:最近在给学院的网站做一个添加附件的功能,首先到了某某邮箱看了一下,简单实用,但是是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">
-
- $(function() {
-
- function plupload(){
- $("#uploader").pluploadQueue({
-
- runtimes : ‘flash,html5,gears,browserplus,silverlight,html4‘,
- url : "<%=basePath%>upload",
-
- chunk_size : ‘1mb‘,
-
- dragdrop: true,
- filters : {
-
- max_file_size : ‘10mb‘,
-
- mime_types: [
- {title : "Image files", extensions : "jpg,gif,png"},
- {title : "Zip files", extensions : "zip"}
- ]
- },
-
- resize: {
- width : 200,
- height : 200,
- quality : 90,
- crop: true
-
- },
- flash_swf_url : ‘<%=basePath%>plupload/js/Moxie.swf‘,
-
- 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;
-
-
-
-
-
-
-
-
- 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\"}";
-
-
-
-
-
-
-
-
- public static void upload(Plupload plupload, File dir) throws IllegalStateException, IOException {
-
- String filename = "" + System.currentTimeMillis() + plupload.getName();
- upload(plupload, dir, filename);
- }
-
-
-
-
-
-
-
-
-
- public static void upload(Plupload plupload, File dir, String filename) throws IllegalStateException, IOException {
- int chunks = plupload.getChunks();
- int chunk = plupload.getChunk();
-
- 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);
-
-
- if (chunks > 1) {
-
- File tempFile = new File(dir.getPath()+ "/" + multipartFile.getName());
-
- 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;
-
-
-
-
-
-
-
- public class Plupload {
-
-
- private String name;
-
- private int chunks = -1;
-
- private int chunk = -1;
-
- 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) {
-
-
-
- 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) {
-
- e.printStackTrace();
- } catch (IOException e) {
-
- e.printStackTrace();
- }
-
- return "login.upload";
- }
- }
好了,到此重点部分的工作算是完成了,需要提醒一下的就是,在前台JS部分有一个rename参数,如果设置成true,后台就获取不到文件的真实名称了,后台获取真实名称也不在是MultipartFile的getOriginalFilename()方法了,因为被分块的文件名称会改变,而需要使用Plupload.getName()获取。附上上传成功界面图(这里把设置的文件是没有限制):
至于后面的如何将状态码以JOSN形式返回与前台进行交互和文件大小一次性上传大小的限制,就在往后用到了在详述吧。
以上观点均为个人意见,欢迎指正与批评。
plupload上传插件在SpringMVC中的整合
标签:
原文地址:http://blog.csdn.net/u014723529/article/details/46635047