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
02 |
< servlet-name >Uploader</ servlet-name > |
03 |
< servlet-class >gson.demo.UploaderServlet</ servlet-class > |
05 |
< param-name >uploadPath</ param-name > |
06 |
< param-value >/WEB-INF/upload</ param-value > |
11 |
< servlet-name >Uploader</ servlet-name > |
12 |
< url-pattern >/uploader</ url-pattern > |
index.jsp
01 |
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> |
03 |
String path = request.getContextPath(); |
04 |
String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/"; |
07 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
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" > |
18 |
* @param chunk 是否分割大文件 |
19 |
* @param callBack 上传成功之后的回调 |
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'}); |
36 |
var fw = GetFrameWindow(upladoer[0]); |
38 |
$(this).window('destroy'); |
39 |
callBack.call(this,files); |
43 |
setTimeout(function(){ |
44 |
var fw = GetFrameWindow(upladoer[0]); |
52 |
* 根据iframe对象获取iframe的window对象 |
56 |
function GetFrameWindow(frame){ |
57 |
return frame && typeof(frame)=='object' && frame.tagName == 'IFRAME' && frame.contentWindow; |
60 |
function makerUpload(chunk){ |
61 |
Uploader(chunk,function(files){ |
62 |
if(files && files.length>0){ |
63 |
$("#res").text("成功上传:"+files.join(",")); |
69 |
< body style = "width: 100%;height: 100%;overflow:hidden;margin: 0;padding: 0;" > |
70 |
< h1 >GodSon Easyui 结合Pluplaod插件的上传演示</ h1 > |
72 |
< a class = "easyui-linkbutton" href = "javascript:makerUpload(false)" >不分割文件上传</ a > < a class = "easyui-linkbutton" href = "javascript:makerUpload(true)" >分割文件上传</ a > |
upload.jsp
01 |
<%@ page language= "java" import= "java.util.*" pageEncoding= "UTF-8" %> |
02 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > |
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" > </div> |
16 |
<script type= "text/javascript" > |
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' , |
26 |
max_file_size : max_file_size, |
27 |
file_data_name: 'file' , |
30 |
flash_swf_url : 'plupload/plupload.flash.swf' , |
32 |
FileUploaded: function (uploader,file,response){ |
33 |
if (response.response){ |
34 |
var rs = $.parseJSON(response.response); |
36 |
files.push(file.name); |
38 |
errors.push(file.name); |
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" ); |
48 |
},(chunk ? {chunk_size: '1mb' } : {}))); |