上传图片JS插件Plupload

Plupload有以下功能和特点：

1、拥有多种上传方式：HTML5、flash、silverlight以及传统的<input type=”file” />。Plupload会自动侦测当前的环境，选择最合适的上传方式，并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式，Plupload会自动为你选择最合适的方式。

2、支持以拖拽的方式来选取要上传的文件

3、支持在前端压缩图片，即在图片文件还未上传之前就对它进行压缩

4、可以直接读取原生的文件数据，这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览

5、支持把大文件切割成小片进行上传，因为有些浏览器对很大的文件比如几G的一些文件无法上传。

以下是我自己写的demo

//实例化一个plupload上传对象
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',//允许的上传方式
browse_button : 'browse', //触发文件选择对话框的按钮，为那个元素id
// container: document.getElementById('upload-box')//按钮外面div id
container: 'container', //这个是容器的地址，
max_file_size : '10mb', //这是文件的最大上传大小，得跟IIS结合使用
url : '/XXX', //服务器端的上传页面地址
flash_swf_url : 'js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
silverlight_xap_url : 'js/Moxie.xap' //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
file_data_name : 'imgFile',//表单name
filters : {
max_file_size : '10mb',//最大文件大小
mime_types: [
{title : "Image files", extensions : "jpg,jpeg,gif,png"},//定义可上传的图片样式
]
},
});

//在实例对象上调用init()方法进行初始化
uploader.init();

//绑定各种事件，并在事件监听函数中做你想做的事
uploader.bind('FilesAdded',function(up,files){
//每个事件监听函数都会传入一些很有用的参数，
//我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作

//文件添加时，会在容器里显示待上传的文件列表
for (var i in files) { $('filelist').innerHTML += '' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ')'; }
});
uploader.bind('UploadProgress',function(uploader,file){
//每个事件监听函数都会传入一些很有用的参数，
//我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作

//文件上传进度
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
});
//......
//......

//最后给"开始上传"按钮注册事件
document.getElementById('start_upload').onclick = function(){
uploader.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
}

</script>

可参考：http://www.cnblogs.com/2050/p/3913184.html

http://www.cnblogs.com/luckybird/archive/2013/01/15/2861072.html

秒客网

上传图片JS插件Plupload

相关文章