一、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)
有不足之处,希望各位不吝赐教;或者有不懂的地方,都可以提问。