美文网首页
Plupload多按钮上传,并获取上传按钮的自定义属性

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

作者: 无至 | 来源:发表于2021-12-01 16:04 被阅读0次

    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

    相关文章

      网友评论

          本文标题:Plupload多按钮上传,并获取上传按钮的自定义属性

          本文链接:https://www.haomeiwen.com/subject/tumsxrtx.html