plupload多实例实现
搜索了很多的貌似对这个实现的没有很明确的文档
翻了半天找到一个老外写的deomo
记录下来吧
实现原理就是实例化多个plupload 每个都和自己对应的id绑定
感觉性能一般,但是既然支持多文件的上传,那么单个页面上也不会有很多的上传实例,所以应该够用
JS
var uploaders = new Array();
initUploaders = function(uploaders) {
console.log("initUploaders()");
$(".gallery").each(function() {
var el = $(this);
var button = el.attr("id") + "_uploader";
console.log("Init uploader id:" + el.attr("id"));
var uploader = new plupload.Uploader({
runtimes: 'gears,html5,flash,silverlight,browserplus',
browse_button: button,
max_file_size: '10mb',
url: 'ModuleGallery/Upload/',
flash_swf_url: 'http://www.plupload.com/plupload/js/plupload.flash.swf',
silverlight_xap_url: 'http://www.plupload.com/plupload/js/plupload.silverlight.xap',
filters: [
{
title: "Image files",
extensions: "jpg,gif,png"}
]
});
uploader.bind('FilesAdded', function(up, files) {
uploader.start();
});
uploader.bind('QueueChanged', function (up, files) {
uploader.start();
up.refresh();
});
uploader.init();
uploaders.push(uploader);
});
};
initUploaders(uploaders);
HTML
<div id="unique_id" class="gallery">
<a href="" id="unique_id_uploader">Upload</a>
</div>
<div id="unique_id2" class="gallery">
<a href="" id="unique_id2_uploader">Upload</a>
</div>
只写靠谱的文档
不用这么麻烦的
browse_button : ['uploader','uploaderA'],
这样就可以了
虽然可以触发,怎么动态传参数呢
不好意思哈,因为我也很久没琢磨这个东西了
我在我的一篇博客里有详细说明。
http://www.sojson.com/blog/214.html
这种情况下,如果有没有多余的业务,上传成功即可,那么就用下面的方式:
有的同学知道 Plupload 有一个设置,可以设置为数组。下面代码的browse_button 字段可以为数组,即为多个id
var uploader = new plupload.Uploader({
//触发上传选择图片事件
browse_button : ["cardzmbtn","cardbmbtn","cardzmbtn-img","cardbmbtn-img"],
url : _upload ,//服务器端的上传页面地址
max_file_size: '2mb',//限制为2MB
filters: [{title: "Image files",extensions: "jpg,gif,png"}]//图片限制
});
这里有一个缺陷就是,如果对对应的上传图片按钮处理不同的回调事件,可能就有点力不从心,我也console.log(uploader) 对象仔细看,没有触发上传的id 元素存储,要是有就解决了。
如果每个上传的按钮对应的结果处理方法都不同,那就循环实现,详细查看下面的地址:Plupload 上传详细讲解,Plupload 多实例上传,Plupload多个上传按钮