最近发现一个非常牛的上传组件,前端根据浏览器不同选择使用Html5、 Gears, Silverlight, Flash, BrowserPlus来对文件进行客户端优化,比如大图片的压缩,大文件分块上传,简直是太牛了,还有上传进度条、多文件上传等。官方网 站:http://plupload.com/,下载的domo是php版本的,于是我弄了个java版本的,分享给大家,
前端js等文件去下载个domo就有了,后端使用到了commons-fileupload-1.2.2.jar这个包。
前端html:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>plupload</title>
<!-- 配置界面上的css -->
<link rel="stylesheet" type="text/css" href="plupload/jquery.plupload.queue/css/jquery.plupload.queue.css">
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="plupload/plupload.full.js"></script>
<script type="text/javascript" src="plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<!-- 国际化中文支持 -->
<script type="text/javascript" src="plupload/i18n/cn.js"></script>
<script type="text/javascript">
/* Convert divs to queue widgets when the DOM is ready */
$(function(){
function plupload(){
$("#uploader").pluploadQueue({
// General settings
runtimes : 'html5,gears,browserplus,silverlight,flash,html4',
url : 'servlet/fileUpload',
max_file_size : '10mb',
unique_names: true,
chunk_size: '2mb',
// Specify what files to browse for
filters : [
{title: "Image files", extensions: "jpg,gif,png"},
{title: "Zip files", extensions: "zip"}
],
resize: {width: 640, height: 480, quality: 90},
// Flash settings
flash_swf_url: 'plupload/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url: 'plupload/plupload.silverlight.xap',
// 参数
multipart_params: {'user': 'Rocky', 'time': '2012-06-12'}
});
}
plupload();
$('#Reload').click(function(){
plupload();
});
});
</script>
<div style="width:750px; margin:0 auto">
<form id="formId" action="Submit.action" method="post">
<div id="uploader">
<p>您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5 .</p>
</div>
<input value="重新上传" id="Reload" type="button">
</form>
</div>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>plupload</title>
<!-- 配置界面上的css -->
<link rel="stylesheet" type="text/css" href="plupload/jquery.plupload.queue/css/jquery.plupload.queue.css">
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="plupload/plupload.full.js"></script>
<script type="text/javascript" src="plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<!-- 国际化中文支持 -->
<script type="text/javascript" src="plupload/i18n/cn.js"></script>
<script type="text/javascript">
/* Convert divs to queue widgets when the DOM is ready */
$(function(){
function plupload(){
$("#uploader").pluploadQueue({
// General settings
runtimes : 'html5,gears,browserplus,silverlight,flash,html4',
url : 'servlet/fileUpload',
max_file_size : '10mb',
unique_names: true,
chunk_size: '2mb',
// Specify what files to browse for
filters : [
{title: "Image files", extensions: "jpg,gif,png"},
{title: "Zip files", extensions: "zip"}
],
resize: {width: 640, height: 480, quality: 90},
// Flash settings
flash_swf_url: 'plupload/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url: 'plupload/plupload.silverlight.xap',
// 参数
multipart_params: {'user': 'Rocky', 'time': '2012-06-12'}
});
}
plupload();
$('#Reload').click(function(){
plupload();
});
});
</script>
<div style="width:750px; margin:0 auto">
<form id="formId" action="Submit.action" method="post">
<div id="uploader">
<p>您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5 .</p>
</div>
<input value="重新上传" id="Reload" type="button">
</form>
</div>
后端
package com.rock;
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 javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItemIterator;
import org.apache.commons.fileupload.FileItemStream;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.util.Streams;
public class FileUploadAction extends HttpServlet {
private static final long serialVersionUID = 3447685998419256747L;
private static final String RESP_SUCCESS = "{\"jsonrpc\" : \"2.0\", \"result\" : \"success\", \"id\" : \"id\"}";
private static final String RESP_ERROR = "{\"jsonrpc\" : \"2.0\", \"error\" : {\"code\": 101, \"message\": \"Failed to open input stream.\"}, \"id\" : \"id\"}";
public static final String JSON = "application/json";
public static final int BUF_SIZE = 2 * 1024;
public static final String FileDir = "uploadfile/";
private int chunk;
private int chunks;
private String name;
private String user;
private String time;
/**
* Handles an HTTP POST request from Plupload.
*
* @param req The HTTP request
* @param resp The HTTP response
*/
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String responseString = RESP_SUCCESS;
boolean isMultipart = ServletFileUpload.isMultipartContent(req);
if(isMultipart){
ServletFileUpload upload = new ServletFileUpload();
try {
FileItemIterator iter = upload.getItemIterator(req);
while (iter.hasNext()) {
FileItemStream item = iter.next();
InputStream input = item.openStream();
// Handle a form field.
if(item.isFormField()){
String fileName = item.getFieldName();
String value = Streams.asString(input);
if("name".equals(fileName)){
this.name = value;
}else if("chunks".equals(fileName)){
this.chunks = Integer.parseInt(value);
}else if("chunk".equals(fileName)){
this.chunk = Integer.parseInt(value);
}else if("user".equals(fileName)){
this.user = value;
}else if("time".equals(fileName)){
this.time = value;
}
}
// Handle a multi-part MIME encoded file.
else {
String fileDir = req.getSession().getServletContext().getRealPath("/")+FileDir;
File dstFile = new File(fileDir);
if (!dstFile.exists()){
dstFile.mkdirs();
}
File dst = new File(dstFile.getPath()+ "/" + this.name);
saveUploadFile(input, dst);
}
}
}
catch (Exception e) {
responseString = RESP_ERROR;
e.printStackTrace();
}
}
// Not a multi-part MIME request.
else {
responseString = RESP_ERROR;
}
if(this.chunk == this.chunks - 1){
System.out.println("用户:"+this.user);
System.out.println("文件名称:"+this.name);
System.out.println("上传时间:"+this.time);
}
resp.setContentType(JSON);
byte[] responseBytes = responseString.getBytes();
resp.setContentLength(responseBytes.length);
ServletOutputStream output = resp.getOutputStream();
output.write(responseBytes);
output.flush();
}
/**
* Saves the given file item (using the given input stream) to the web server's
* local temp directory.
*
* @param input The input stream to read the file from
* @param dst The dir of upload
*/
private void saveUploadFile(InputStream input, File dst) throws IOException {
OutputStream out = null;
try {
if (dst.exists()) {
out = new BufferedOutputStream(new FileOutputStream(dst, true),
BUF_SIZE);
} else {
out = new BufferedOutputStream(new FileOutputStream(dst),
BUF_SIZE);
}
byte[] buffer = new byte[BUF_SIZE];
int len = 0;
while ((len = input.read(buffer)) > 0) {
out.write(buffer, 0, len);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (null != input) {
try {
input.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if (null != out) {
try {
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
}