使用plupload进行多文件上传

一 、插件下载

使用plupload必须下载plupload.full.min.js，你可以去http://www.plupload.com/官网进行下载！

二、如何使用

（1）首先加入下载的js文件

（2）定义一个添加文件的按钮和上传文件按钮

（3）定义添加文件的显示div，添加的文件将显示在这个div里面

（4）开始编写插件脚本

<!-- 多文件上传插件 -->
<script type="text/javascript">

var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',  
browse_button : 'pickfiles',                           / /触发文件选择对话框的DOM元素
container: document.getElementById('container'),    //展现上传文件列表的容器

url : 'esiAction_upLoads.action',      //服务器端接收和处理上传文件的脚本地址
flash_swf_url : '../js/Moxie.swf',         //flash上传组件的url地址,当使用flash上传方式会用到该参数.
silverlight_xap_url : '../js/Moxie.xap',  //silverlight上传组件的url地址，当使用silverlight上传方式会用到该参数。

filters : {
max_file_size : '10mb',                 //最大上传文件大小
mime_types: [
{title : "Image files", extensions : "txt"},      //筛选文件，只上传txt文件
{title : "Zip files", extensions : "zip"}
]
},


init: {                                                       //当Plupload初始化完成后触发
PostInit: function() {                                           //当Init事件发生后触发
document.getElementById('filelist').innerHTML = '';
document.getElementById('uploadfiles').onclick = function() {
uploader.start();
return false;
};
},


FilesAdded: function(up, files) {        //当文件添加到上传队列后触发,当上选择好文件后就将选择好的文件显示在自己规定的div中显示
plupload.each(files, function(file) {
document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
});
},


UploadProgress: function(up, file) {       //显示上传进度条
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
},


Error: function(up, err) {      //发生错误时触发
document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));
},

UploadComplete: function(uploader,file) {    //当上传队列中所有文件都上传完成后触发
$("#container").html('<form action="../page/esiAction_find.action" method="post" id="form2">'+
           '<input type="text" name="filepath"  />'
           +'</form>');
   $("#form2").submit();
}
}
});
uploader.init();
</script>

因为使用plupload和ssh组合上传不会跳转页面，所以我使用了UploadComplete方法重新请求跳转页面。

（5）后台接收

后台接收就使用file接受即可。

（6）plupload参考文档

http://chaping.github.io/plupload/doc/