工作中用到的一个前端的插件webupload,由于页面中有不确定数量的上传图片的按钮。刚开始我试着把这个插件封装,结果……欲哭无泪呀,上传不了,整个页面的上传按钮都不好使。最后在文档中,发现了addButton这个参数,终于解决了问题。不说了,直接上代码
var uploader = WebUploader.create({
// 选完文件后,是否自动上传。
auto: true,
// swf文件路径
swf: BASE_URL + 'assets/admin-tools/webuploader_fex/dist/Uploader.swf',
// 文件接收服务端。
server: 'url',
duplicate : true,
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#filePicker',
fileVal: 'image', //服务端File对应的名称。
// 只允许选择图片文件。
accept: {
title: 'Image',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
// 文件上传成功,给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file, obj ) {
//如果你上传成功需要对某一个文本框赋值 以$("#rt_"+file.source.ruid)为对象找到需要赋值的文本框
$("#rt_"+file.source.ruid).parent().next().val(obj.name);
成功执行的代码
});
// 文件上传失败,显示上传出错。
uploader.on( 'uploadError', function( file ) {
//失败执行的代码
});
//计算出需要多少个实例化的按钮
var boxes_len = $(".class").length;
//循环实例化页面的上传按钮
for(var i=1; i<=boxes_len ;i++){
uploader.addButton({
id : "#filePicker"+(i),//必须唯一
innerHTML : '选择图片',
});
}