Plupload多按钮上传,并获取上传按钮的自定义属性

1、upload多按钮部分HTML代码

<div class="row" id="upload_btn_place">
  <div class="col-md-4">
      1、 材料1
      <a href="javascript:void(0)" class="pickfiles ml-2" id="pickfiles-11" data-type="11" data-file-type="材料1">立即上传</a>     
  </div>
  <div class="col-md-4">
      2、 材料2
      <a href="javascript:void(0)" class="pickfiles ml-2" id="pickfiles-12" data-type="12" data-file-type="材料2">立即上传</a>     
  </div>
</div>

2、多个plupload分开初始化,适用于对上传格式要求不同,上传大小要求不同

$("#uploader").pluploadQueue({
    runtimes: 'html5,flash',
    url: '/upload',
    //上传的文件名是否唯一
    unique_names: true, 
    //是否可以多选
    multi_selection: false, 
    browse_button: "pickfiles-11",
    //触发文件选择对话框的按钮,为那个元素id
    container: 'upload_btn_place',
    flash_swf_url: '/assets/plugins/plupload/Moxie.swf',
    silverlight_xap_url: '/assets/plugins/plupload/Moxie.xap',
    filters: {
        max_file_size: '50M',
        mime_types: [{
            title: "files",
            extensions: "doc,docx"
        }]
    }
});

$("#uploader").pluploadQueue({
    runtimes: 'html5,flash',
    url: '/upload',
    //上传的文件名是否唯一
    unique_names: true,
    //是否可以多选
    multi_selection: false,
    browse_button: "pickfiles-12",
    //触发文件选择对话框的按钮,为那个元素id
    container: 'upload_btn_place',
    flash_swf_url: '/assets/plugins/plupload/Moxie.swf',
    silverlight_xap_url: '/assets/plugins/plupload/Moxie.xap',
    filters: {
        max_file_size: '50M',
        mime_types: [{
            title: "files",
            extensions: "pdf"
        }]
    }
});

3、以组数的形式(browse_button: "[pickfiles-11,pickfiles-12]")初始化多个plupload,适应于上传格式相同,文件大小限制相同

$("#uploader").pluploadQueue({
    runtimes: 'html5,flash',
    url: '/upload',
    //上传的文件名是否唯一
    unique_names: true,
    //是否可以多选
    multi_selection: false,
    browse_button: "[pickfiles-11,pickfiles-12]",
    //触发文件选择对话框的按钮,为那个元素id
    container: 'upload_btn_place',
    flash_swf_url: '/assets/plugins/plupload/Moxie.swf',
    silverlight_xap_url: '/assets/plugins/plupload/Moxie.xap',
    filters: {
        max_file_size: '50M',
        mime_types: [{
            title: "files",
            extensions: "doc,docx"
        }]
    }
});

4、获取上传按钮的自定义属性

var type,filetype;
$(".pickfiles").click(function(event) {
    type = $(this).attr("data-type");
    filetype  = $(this).attr("data-file-type");
    event.stopPropagation();
});

5、上传效果

11.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容