Easyui 结合Pluplaod插件的上传

Easyui 结合Pluplaod插件的上传。被某人说了多次，要共享。这次总结了一下，共享出来。一共涉及到一个Servlet两个jsp

plupload官网

http://www.plupload.com/

java源码：plupload.zip

UploaderServlet.java

package gson.demo;

/**
 * @author ____′↘夏悸
 * <a href="http://bbs.btboys.com/">Easyui 中文社区</a>
 * <a href="http://easyui.btboys.com/">Easyui 学习班</a>
 */
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.List;
import java.util.UUID;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;
import org.apache.commons.io.FilenameUtils;

public class UploaderServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;
    String repositoryPath;
    String uploadPath;

    @SuppressWarnings("unchecked")
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        Integer schunk = null;//分割块数
        Integer schunks = null;//总分割数
        String name = null;//文件名
        BufferedOutputStream outputStream=null;
        if (ServletFileUpload.isMultipartContent(request)) {
            try {
                DiskFileItemFactory factory = new DiskFileItemFactory();
                factory.setSizeThreshold(1024);
                factory.setRepository(new File(repositoryPath));//设置临时目录
                ServletFileUpload upload = new ServletFileUpload(factory);
                upload.setHeaderEncoding("UTF-8");
                upload.setSizeMax(5 * 1024 * 1024);//设置附近大小
                List<FileItem> items = upload.parseRequest(request);
                //生成新文件名
                String newFileName = null;
                for (FileItem item : items) {
                    if (!item.isFormField()) {// 如果是文件类型
                        name = item.getName();// 获得文件名
                        newFileName = UUID.randomUUID().toString().replace("-","").concat(".").concat(FilenameUtils.getExtension(name));
                        if (name != null) {
                            String nFname = newFileName;
                            if (schunk != null) {
                                nFname = schunk + "_" + name;
                            }
                            File savedFile = new File(uploadPath, nFname);
                            item.write(savedFile);
                        }
                    } else {
                        //判断是否带分割信息
                        if (item.getFieldName().equals("chunk")) {
                            schunk = Integer.parseInt(item.getString());
                        }
                        if (item.getFieldName().equals("chunks")) {
                            schunks = Integer.parseInt(item.getString());
                        }
                    }
                }
                
                if (schunk != null && schunk + 1 == schunks) {
                    outputStream = new BufferedOutputStream(new FileOutputStream(new File(uploadPath, newFileName)));
                    //遍历文件合并
                    for (int i = 0; i < schunks; i++) {
                        File tempFile=new File(uploadPath,i+"_"+name);
                        byte[] bytes=FileUtils.readFileToByteArray(tempFile);  
                        outputStream.write(bytes);
                        outputStream.flush();
                        tempFile.delete();
                    }
                    outputStream.flush();
                }
                response.getWriter().write("{\"status\":true,\"newName\":\""+newFileName+"\"}");
            } catch (FileUploadException e) {
                e.printStackTrace();
                response.getWriter().write("{\"status\":false}");
            } catch (Exception e) {
                e.printStackTrace();
                response.getWriter().write("{\"status\":false}");
            }finally{  
                try {  
                    if(outputStream!=null)
                        outputStream.close();  
                } catch (IOException e) {  
                    e.printStackTrace();  
                }  
            }   
        }
    }

    @Override
    public void init(ServletConfig config) throws ServletException {
        repositoryPath = FileUtils.getTempDirectoryPath();
        uploadPath = config.getServletContext().getRealPath(config.getInitParameter("uploadPath"));
        File up = new File(uploadPath);
        if(!up.exists()){
            up.mkdir();
        }
    }
}

web.xml

01

<servlet>

02	<servlet-name>Uploader</servlet-name>

03	<servlet-class>gson.demo.UploaderServlet</servlet-class>

04	<init-param>

05	<param-name>uploadPath</param-name>

06	<param-value>/WEB-INF/upload</param-value>

07	</init-param>

08	</servlet>

09

10	<servlet-mapping>

11	<servlet-name>Uploader</servlet-name>

12	<url-pattern>/uploader</url-pattern>

13	</servlet-mapping>

 

index.jsp

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

02

<%

03	String path = request.getContextPath();

04	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";

05

%>

06

07	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

08

<html>

09

<head>

10	<base href="<%=basePath%>">

11	<title>GodSon Easyui 结合Pluplaod插件的上传演示</title>

12	<link rel="stylesheet" href="bootstrap/easyui.css" type="text/css"></link>

13	<script type="text/javascript" src="jquery-1.8.0.min.js"></script>

14	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

15	<script type="text/javascript">

16

/**

17	* 创建上传窗口 公共方法

18	* @param chunk 是否分割大文件

19	* @param callBack 上传成功之后的回调

20

*/

21	function Uploader(chunk,callBack){

22	var addWin = $('<div style="overflow: hidden;"/>');

23	var upladoer = $('<iframe/>');

24	upladoer.attr({'src':'<%=basePath%>/uploader.jsp?chunk='+chunk,width:'100%',height:'100%',frameborder:'0',scrolling:'no'});

25	addWin.window({

26	title:"上传文件",

27	height:350,

28	width:550,

29	minimizable:false,

30	modal:true,

31	collapsible:false,

32	maximizable:false,

33	resizable:false,

34	content:upladoer,

35	onClose:function(){

36	var fw = GetFrameWindow(upladoer[0]);

37	var files = fw.files;

38	$(this).window('destroy');

39	callBack.call(this,files);

40

},

41	onOpen:function(){

42	var target = $(this);

43	setTimeout(function(){

44	var fw = GetFrameWindow(upladoer[0]);

45	fw.target = target;

46

},100);

47

}

48

});

49

}

50

51

/**

52	* 根据iframe对象获取iframe的window对象

53	* @param frame

54	* @returns {Boolean}

55

*/

56	function GetFrameWindow(frame){

57	return frame && typeof(frame)=='object' && frame.tagName == 'IFRAME' && frame.contentWindow;

58

}

59

60	function makerUpload(chunk){

61	Uploader(chunk,function(files){

62	if(files && files.length>0){

63	$("#res").text("成功上传："+files.join(","));

64

}

65

});

66

}

67

</script>

68

</head>

69	<body style="width: 100%;height: 100%;overflow:hidden;margin: 0;padding: 0;">

70	<h1>GodSon Easyui 结合Pluplaod插件的上传演示</h1>

71

<hr/>

72	<a class="easyui-linkbutton" href="javascript:makerUpload(false)">不分割文件上传</a> <a class="easyui-linkbutton" href="javascript:makerUpload(true)">分割文件上传</a>

73

<hr/>

74	<div id="res"></div>

75

</body>

76

</html>

 

upload.jsp

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

02	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

03

<html>

04

<head>

05	<title>文件上传</title>

06	<link rel="stylesheet" href="plupload/queue/css/jquery.plupload.queue.css" type="text/css"></link>

07	<script type="text/javascript" src="jquery-1.8.0.min.js"></script>

08	<script type="text/javascript" src="plupload/plupload.js"></script>

09	<script type="text/javascript" src="plupload/plupload.html4.js"></script>

10	<script type="text/javascript" src="plupload/plupload.html5.js"></script>

11	<script type="text/javascript" src="plupload/plupload.flash.js"></script>

12	<script type="text/javascript" src="plupload/zh_CN.js"></script>

13	<script type="text/javascript" src="plupload/queue/jquery.plupload.queue.js"></script>

14	<body style="padding: 0;margin: 0;">

15	<div id="uploader">&nbsp;</div>

16	<script type="text/javascript">

17	var files = [];

18	var errors = [];

19	var type = 'file';

20	var chunk = eval('${param.chunk}');

21	var max_file_size = '5mb';

22	var filters = {title : "文档", extensions : "zip,doc,docx,xls,xlsx,ppt,pptx"};

23	$("#uploader").pluploadQueue($.extend({

24	runtimes : 'flash,html4,html5',

25	url : 'uploader',

26	max_file_size : max_file_size,

27	file_data_name:'file',

28	unique_names:true,

29	filters : [filters],

30	flash_swf_url : 'plupload/plupload.flash.swf',

31

init:{

32	FileUploaded:function(uploader,file,response){

33	if(response.response){

34	var rs = $.parseJSON(response.response);

35	if(rs.status){

36	files.push(file.name);

37

}else{

38	errors.push(file.name);

39

}

40

}

41

},

42	UploadComplete:function(uploader,fs){

43	var e= errors.length ? ",失败"+errors.length+"个("+errors.join("、")+")。" : "。";

44	alert("上传完成！共"+fs.length+"个。成功"+files.length+e);

45	target.window("close");

46

}

47

}

48	},(chunk ? {chunk_size:'1mb'} : {})));

49

</script>

50

</body>

51

</html>