一、plupload的应用（使用详情，请参考链接：http://www.cnblogs.com/2050/p/3913184.html）
（1）首先需要引入2个js，jquery.min.js与plupload.full.min.js，其他细节可以参考官方信息
（2）plupload前端内容html
2 <!--文件上传--> 3 <div class="form-group" style="position:relative;"> 4 <label class="bg-info" id="container">上传文件 5 <button type="button" id="uploadfiles"> 6 <span class="glyphicon-arrow-up"></span> 开始上传 7 </button> 8 <button type="button"id="pickfiles" > 9 <span class="glyphicon-plus"></span> 添加文件 10 </button> 11 </label> 12 <div class="plupload"> 13 <header class="file_box file_header"> 14 <label class="file_delete">操作</label> 15 <label class="file_id">文件ID</label> 16 <label class="file_name">文件名</label> 17 <span class="file_size">大小</span> 18 <b class="file_status">状态</b> 19 </header> 20 21 <ul id="filelist" class="filelist">
Your browser doesn't have Flash, Silverlight or HTML5 support.</ul> 22 </div> 23 </div> 24 <div id="erro" style="height: 10%;overflow: auto;color: red;"></div>
页面显示的效果：
上传后的效果：
(3)js中的内容，主要用于文件的上传
1 var uploader = new plupload.Uploader({// 创建实例的构造方法
2 runtimes : 'html5,flash,silverlight,html4',// 指定上传方式
3 browse_button : 'pickfiles', // 上传按钮
4 // url : '../upload',
5 unique_names : true,// 文件名是否唯一
6 url : '/upload?uid='+uid, //上传到服务器，将文件存入本地磁盘,uid可以传入的参数
7 flash_swf_url : 'plupload/Moxie.swf', //flash与silverlight在本地路径，具体含义参考以上链接
8 silverlight_xap_url : 'plupload/Moxie.xap',
9 filters : { //过滤器
10 max_file_size : '100mb', //文件最大可上传的文件大小
mime_types : [ //只允许上传图片和zip文件
{ title : "Image files", extensions : "jpg,gif,png" },
{ title : "Zip files", extensions : "zip" }
],
11 prevent_duplicates : true, // 不可选取重复的文件
12 },
13 init : {
14 PostInit : function() {
15 document.getElementById('filelist').innerHTML = '';
16 $("#uploadfiles").click (function() {
var isUpload = confirm("是否确定要上传文件?");
if(isUpload){
uploader.start();// 开始上传
return false;
}
});
20 },
21 FilesAdded : function(up, files) {
22 plupload.each(files, function(file) {
23 document.getElementById('filelist').innerHTML += '<li id="'+ file.id + '" class="file_box">'
+ ' <label class="file_delete">'
24 + '<a href="javascript:;">' + '删除' + '</a>'+ '</label>'
+ ' <label class="file_id">' + file.id
25 + '</label>' + ' <label class="file_name">'+ file.name + '</label>'
+ ' <span class="file_size">'
+ plupload.formatSize(file.size)
26 + '</span> <a class="file_status"></a></li>';
27 $.post(pathUrl+file.name,function(data){ //用于判断上传队列中文件在本地数据中是否存在
if (data.code != 0) {
var con = confirm("文件《"+file.name+"》已经存在，或者与本地文件同名，是否确定覆盖原有文件?");
if(!con){ //如果不覆盖，就删除队列中的文件，不对其进行上传
$("#"+file.id).remove();
uploader.removeFile(file);
}
}
});
});
plupload.each(files, function(file) { //主要针对每个文件的删除操作
$("#"+file.id+" .file_delete").click(function() {
if(file.status==2){
alert("文件《"+file.name+"》正在上传，请不要删除！");
}else if(file.status==5){
alert("文件《"+file.name+"》已经上传成功，不可以删除！");
}else{
var gnl = confirm("确定要删除《"+file.name+"》?");
if (gnl == true) {
$("#"+file.id).remove();
uploader.removeFile(file);
} else {
return false;
}
}
});
});
47 },
48 UploadProgress : function(up, file) { //显示文件上传的状态
49 //_mask();
50 var percent = file.percent;
51 $("#" + file.id).find(".file_status").text(file.percent + "%");
52 //_mask();
53 },// 文件上传成功的时候触发，针对于每一个文件；这里主要返回文件上传成功与否的状态，
54 FileUploaded : function(up, file, info) {
55 var data = eval("(" + info.response + ")");// 解析返回的json数据
56 console.log(data);
57 if (data.code == 3) {
58 alert( "文件《"+file.name+"》上传失败！");
61 }
63 },
64 UploadComplete : function(up, files) { //队列中的所有文件上传完后，触发
65 if(files.length<=0){
66 alert("请先添加文件进行，并上传！");
69 }else{
70 var arr2 = new Array();
71 plupload.each(files, function(file) {
72 console.log(file.status);
73 if (file.status == 5) { //将上传成功的文件信息发送到后台进行处理
74 var json = {
75 docId:file.id,
76 docName : file.name,
77 fileSize : plupload.formatSize(file.size)
78 };
79 arr2.push(json);
80 }
81 });
82 console.log(arr2);
83 arr2 = JSON.stringify(arr2);
84 $("#uploadfilelist").val(arr2); //将结果传给前台，以便统一操作
85 alert( "文件上传完成");
88 }
89 },
90 Error : function(up, err,file) { // 上传出错的时候触发
91 if(err.code=="-600"){
alert("文件："+err.file.name+"太大，超过100mb!");
}else{
alert( err.file.name+"添加上传队列失败！错误原因："+err.message);
}
95 }
96 }
97 });
98 uploader.init(); //初始化plupload,这句是必须的
（4）后台处理，将文件上传到指定的文件夹下（springMVC的内容，基础知识请参考相关资料）
1 @ResponseBody
2 @RequestMapping(value = "upload", produces = "application/json; charset=utf-8", method = RequestMethod.POST)
3 public JSONObject uploadFile(@RequestParam("file") MultipartFile file,@RequestParam("uid") String uid) {
6 JSONObject jsonObj = new JSONObject();
7 jsonObj.element("code", 0);
8 InputStream input = null;
9 FileOutputStream out = null;
10 String savePath = null, targetPath = null;
11 try {14 if (file != null) { //是否有文件传入
targetPath="E:/aaa"; //根据传入的参数uid，查找文件的相关信息，如文件夹的路径
String fileName = file.getOriginalFilename();
20 savePath = targetPath + '/' + fileName;
21 File realfile = new File(targetPath);// 文件夹目录是否存在
22 if (!realfile.exists()) {
23 realfile.mkdirs();
24 }
25 byte[] bs = file.getBytes();
26 if (bs.length != 0) {
27 if (bs.length > 52428800) { // 最大上传文件50Mb
28 jsonObj.element("code", 1);
29 }
30 input = file.getInputStream();
31 out = new FileOutputStream(savePath);// 创建一个缓冲区，将信息存放到指定目录
32 byte buffer[] = new byte[1024];// 判断输入流中的数据是否已经读完的标识
33 int len = 0;
34 // 循环将输入流读入到缓冲区当中，(len=in.read(buffer))>0就表示in里面还有数据
// 使用FileOutputStream输出流将缓冲区的数据写入到指定的目录(savePath+ "\\"+filename)当中
35 while ((len = input.read(buffer)) > 0) {
36 out.write(buffer, 0, len);
37 }
38 }
40 }
41 } catch (Exception e) {
42 jsonObj.element("code", 2);
44 File file2 = new File(savePath);
45 if (file2.exists()) {
46 file2.delete();
47 }
48 e.printStackTrace();
49 } finally {
50 if(input!=null){
51 try {// 关闭输入流
52 input.close();
53 } catch (IOException e1) {
54 e1.printStackTrace();
55 }
56 }
57 if(out!=null){
58 try { // 关闭输出流
59 out.close();
60 } catch (IOException e) {
61 e.printStackTrace();
62 }
63 }
64 }
65 return jsonObj;
66 }
到此，使用plupload+springMVC的应用，已经完结
但是，plupload的细节地方的理解，可以自行查找网上的资料，这里不做赘述
(
添加（红色字体是才修改的）
：最近才有空完善一下plupload的js，主要有以下几个方面的修改：①上传前先判断，(1)是否上传；(2)同文件名下，是否覆盖上传②上传后，要删除文件的判断(1)只要在上传中或者上传成功后，不可以删除③有些自己写的通用js已经去掉，改为网上公用的js)
有不足之处，希望各位不吝赐教；或者有不懂的地方，都可以提问。
版权声明：本文为weixin_42575593原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。