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
网友评论