互联网上的文章真TM不靠谱 还是自己来的好 --只写靠谱的文档

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>

只写靠谱的文档

标签: plupload多实例, plupload

已有 4 条评论

  1. --- ---

    不用这么麻烦的
    browse_button : ['uploader','uploaderA'],
    这样就可以了

    1. Coco Coco

      虽然可以触发,怎么动态传参数呢

      1. 不好意思哈,因为我也很久没琢磨这个东西了

  2. 我在我的一篇博客里有详细说明。
    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多个上传按钮

添加新评论