webupload 多个实例化上传按钮

来源:互联网 发布:魔钢歼灭者淘宝价格 编辑:程序博客网 时间:2024/05/21 18:45

工作中用到的一个前端的插件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 : '选择图片',            });        }
0 0
原创粉丝点击