webuploader多实例上传如何做呢

Question

页面中有几个需要上传的部分,比如 资格证书和个人相片

我写了个公共的方法, 但是发现 后调用的会覆盖前面的, 不知道为什么, 可能写法不对,让webuploader只生成了一个实例
我写了个公共方法:

function uploadPic(wrap) {
    var uploader;
    //以及其他一些变量
    //.. 一些其他方法如:addFile removeFile
    //实例化
     uploader = new WebUploader.Uploader({
        pick: {
            id: '#' + wrap + ' .file_picker',
            multiple: false
        },
        .....等等option
    //upload.onXXX的很多监听事件
}
//用自己的按钮, 触发webupload为我们生成的按钮(由于风格不一致,我将其hide了)
function selectFile(){
    var $fileInput = $('#' + wrap + '').find('input[type=file]');
    $fileInput.trigger("click");
}

下面是我如何使用:
js代码为:

//在我网站的common.js中加入:如果是认证表单页面, 就执行2个上传控件的初始化
if($("#cert_form").length > 0){
        uploadPic('person_pic'); //头像图片    先初始化
        uploadPic('ability_pic');//资格证图片  后初始化
}

目前的问题就是 谁后初始化, 那么上传的图片缩略图就会 在相应的位置展示, 我分析了下 ,就是因为uploader两次初始化覆盖的问题, 不知道咋解决啊

Answer 1

确实，webuploader的html5上传，一个页面多个按钮实例化，后面会覆盖前面的，只会显示一个按钮，没有版本我只能改成flash。现在还在找解决方案，给github提了issue也没有人回，谷歌用flash上传还会报一个错误

Answer 2

function createWebUploasder() {

        webuploaderStep++;

        var id = 'webuploader'+webuploaderStep;

        var html='<li>'
            +'<p class="h">附件'+webuploaderStep+'</p>'
            +'<p class="h"><div type="button" id="'+id+'">选择文件</div>    <a href="javascript:alert(\'编辑\');">编辑</a><a href="javascript:alert(\'删除\');">删除</a></p>'
            +'<p class="d"><input type="text" placeholder="添加说明"/></p>'
            +'</li>'
            +'<script>'
            +'var uploader = WebUploader.create({'

            // 选完文件后，是否自动上传。'
            +'auto: true,'

            // swf文件路径'
            +'swf: "${ctxStatic}\/webuploader\/dist\/Uploader.swf",'

            // 文件接收服务端。'
            +'server: "${ctxStatic}\/ueditor\/jsp\/controller.jsp?action=uploadfile",'

            // 选择文件的按钮。可选。'
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.'
            +'pick: '+id+','

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！'
            +'resize: false'
            +'});'
            +'uploader.on( "uploadSuccess", function( file, response ) {'
            +'if (response && response.url) {'
            +'$("#'+id+'").replaceWith(\'<a href="\'+response.url+\'">\'+response.url+\'</a>\');'
            +'}'
            +'});'
            +'<\/script>';
        $("#cmsFileWrap").find("ul").append(html);

// alert(1);

    }
    
    
    我今天写了一个js的方法， 是可以实现的。无非就是传入不同的id

Answer 3

楼主解决了没有