最近发现一个非常牛的上传组件(http://www.plupload.com/documentation.php)，前端根据浏览器不同选择使用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>
后端
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();
}
}
}
}
}
plupload的方法说明
var uploadFiles = function( ) { //定义上传方法
var uploader = new plupload.Uploader({ //定义上传控件
runtimes: 'html5,flash,html4',
browse_button: 'btn_wordView', //添加文件的标签的ID
container: 'upload_contain', //
url: test.ashx, //后台cs文件
flash_swf_url: flash.swf, //flash文件
filters : [
{title : "Image files", extensions : "jpg,gif,png"} //过滤格式
],
multipart_params: { action: "uploadPhoto" } //传到后台的参数
});
uploader.init(function(up, params) { //初始化
});
$('#start').unbind("click").bind("click",function(e) { //点击提交按钮事件
if(uploader.files.length > 0) {
uploader.start(); //开始上传
e.preventDefault();
}
});
uploader.bind("FilesAdded", function(up, files) {
//添加文件事件绑定
//up 包涵Uploader的全部信息
//files 包涵这一次添加的所有文件的基本信息
});
uploader.bind("BeforeUpload", function(up, file) {
//点击上传提交后，上传前的事件
//up 包涵Uploader的全部信息
//file 准备上传的一个文件的基本信息
});
uploader.bind('UploadProgress', function(up, file) {
//点击上传提交后，上传前的事件完成后，执行正在上传事件
//up 包涵Uploader的全部信息
//file 正在上传的一个文件的基本信息
});
uploader.bind("Error", function(up, err) {
//当上传失败时，所触发的事件
});
uploader.bind("FilesRemoved", function(up, fileArray) {
//删除已添加的文件所触发的事件
});
uploader.bind("FileUploaded", function(up, file, obj) {
//完成一个文件上传
//up 包涵Uploader的全部信息
//file 刚刚上传成功的一个文件的基本信息
//obj 后台cs文件返回的基本信息
});
uploader.bind("UploadComplete", function(up, files) {
//全部文件上传完毕之后所触发的事件
//up 包涵Uploader的全部信息
//files 所上传的全部文件的基本信息
});
};
uploadFiles(option, data);//执行上传的方法。
Plupload支持技术：
1：Flash
2：Gears
3：HTML 5
4：Silverlight
5：BrowserPlus
6：HTML 4
plupload主要功能：
1：突破HTTP上传限制，可上传大文件，官方论坛中有讨论上传2G文件的应用。
2：多文件队列上传
3：图片自动生成缩略图
4：上传后自动生成唯一文件名
5：自定制UI
JS参数配置说明：
<script type="text/javascript">
$(function() {
$("#uploader").pluploadQueue({
runtimes : 'gears,flash,silverlight,browserplus,html5', // 这里是说用什么技术引擎，由于国内浏览器问题这里一般使用flash即可。其他的删除掉。
url : 'upload.php', // 服务端上传路径
max_file_size : '10mb', // 文件上传最大限制。
chunk_size : '1mb', // 上传分块每块的大小，这个值小于服务器最大上传限制的值即可。（文件总大小/chunk_size = 分块数）。
unique_names : true, // 上传的文件名是否唯一
resize : {width : 320, height : 240, quality : 90}, // 是否生成缩略图（仅对图片文件有效）。
filters : [
{title : "Image files", extensions : "jpg,gif,png"},
{title : "Zip files", extensions : "zip"}
], // 这个数组是选择器，就是上传文件时限制的上传文件类型
flash_swf_url : '/plupload/js/plupload.flash.swf', // plupload.flash.swf 的所在路径
silverlight_xap_url : '/plupload/js/plupload.silverlight.xap' // silverlight所在路径
});
// 这一块主要是防止在上传未结束前表带提交，具体大家可酌情修改编写
$('form').submit(function(e) {
var uploader = $('#uploader').pluploadQueue(); // 取得上传队列
if (uploader.files.length > 0) { // 就是说如果上传队列中还有文件
uploader.bind('StateChanged', function() {
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
$('form')[0].submit();
}
});
uploader.start();
} else {
alert('You must queue at least one file.');
}
return false;
});
});
</script>
由于参数过多大家可以到官方网站查看API参数说明。
相关推荐
php多图片上传jQuery插件plupload
本文实例讲述了thinkphp5 框架结合plupload实现图片批量上传功能。分享给大家供大家参考，具体如下： 在extend目录下新增目录uploader，并新建类Uploads <?php namespace uploader; class Uploads { public ...
Plupload.Net图片上传示例源码 功能介绍： Plupload是一个开源组件！功能的确很强大！它主要功能是多文件上传，并提供图片客户端尺寸压缩。主要的特色是可以使用 Flash Gears ...
plupload和java后台实现多图上传并把缩略图跟上传的url显示到画面上 1、使用jQuery的plupload实现上传功能，前台无需太多配置，简单修改即可符合您的要求。虽然是jQuery虽然是plupload,但是大多需要手动修改的地方...
这个Demo 实现了swfupload和plupload图片上传实时预览
主要介绍了Thinkphp5+plupload实现的图片上传功能,结合具体实例形式分析了thinkPHP5结合plupload实现可支持实时预览的图片上传功能相关操作技巧,需要的朋友可以参考下
本文实例讲述了thinkPHP5框架整合plupload实现图片批量上传功能的方法。分享给大家供大家参考，具体如下： 在官网下载plupload http://http//www.plupload.com 或者点击此处本站下载。 这里我们使用的是plupload...
thinkphp 实现plupload上传图片 thinkphp 实现plupload上传图片
主要为大家详细介绍了PHP结合plupload.js JS插件实现多图上传并显示进度条加删除实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
主要使用plupload插件实现多图的上传、视频分片上传等
它是一个开源组件！功能的确很强大！ 它主要功能是多文件上传，并提供图片客户端尺寸压缩。主要的特色是可以使用 Flash Gears HTML 5 Silverlight BrowserPlus HTML 4 等多项技术...使用asp.net+plupload实现了文件上传
基于SpringBoot的文件上传系统，前后端分离，单文件上传，多文件上传，大文件上传，断点续传，文件秒传，图片上传 项目经过严格测试，确保可以运行！ 采用前后端分离的方式进行开发，实现了几种常用的文件上传功能...
今天介绍大家一款多图片上传插件：plupload，通过PHP+Ajax实现多图片上传的效果。用户只需要点击选择要上传的图片，然后图片自动上传到服务器上并立即显示在页面上。
plupload.full.min.js...用于实现PHP+Ajax实现多图片上传的效果。用户只需要点击选择要上传的图片，然后图片自动上传到服务器上并立即显示在页面上。参考 http://blog.csdn.net/u014175572/article/details/51027626
本文详细介绍了通过js+plupload实现了绕过服务器，向又拍云批量上传图片的解决方法，十分的巧妙，也节省了服务器资源，这里推荐给有需要的小伙伴。
主要介绍了yii2.0使用Plupload实现带缩放功能的多图上传的相关资料,需要的朋友可以参考下