贱贱流氓兔
贱贱流氓兔

Web Uploader项目实战中遇到的诸多坑

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件，比较好用，兼容性也比较好；官方文档
废话不多说，直接讨论在项目中遇到的种种坑吧。

1.在一个html页面有未知个地方需要上传图片；

var uploader = WebUploader.create({

    // swf文件路径
    swf: BASE_URL + '/js/Uploader.swf',

    // 文件接收服务端。
    server: 'http://webuploader.duapp.com/server/fileupload.php',

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

    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    resize: false
});

官方文档初始化uploader 对象是这样的，#picker就是页面上需调用上传组件的Id，假如有1~3个，也许可以将上面的代码写上3遍，只要你不嫌麻烦，但是要碰到10个，用这种方法就有点想哭的冲动了，后来就想到下面的方法，每次重新实例化一个uploader对象，并且把需要调用上传组件的控件Id传递过去；

function uploader(domId){

    // swf文件路径
    swf: BASE_URL + '/js/Uploader.swf',

    // 文件接收服务端。
    server: 'http://webuploader.duapp.com/server/fileupload.php',

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

    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    resize: false

    return uploader;
}

假如你需要上传的控件都是动态生成的，这种情况你可以以随机数设置控件Id的属性，类似于；

 uploader("_upload_button_"+randomNum);

randomNum是一个随机数；这样的话，不管页面有多少个需要上传的控件都可以调用上传图片的组件啦。

2. fileQueued与filesQueued事件的区别

假如上传的图片放在一个队列里面，fileQueued事件是每有图片添加到队列里面都会执行的，在这个事件里面，可以处理图片数量的叠加、图片缩略图html的拼接；而filesQueued是在图片选择完后执行的，这个事件里可以将之前拼接好的Html以某种形式展示，我在项目中使用的是artDialog弹框组件，参照文档链接

3. 移除上传队列里面的图片

好不容易将选择图片、图片上传弄好了，这时候产品过来跟你说，待上传的图片队列里面的图片，需要支持选择性的删除，坑啊 ；这时候，可以调用fileDequeued事件

 uploader.on('fileDequeued', function(file){

        fileCount--;
        removeFile(file);

    });

4. 待上传的图片队列里支持重新选择图片上传

假如你选择了几张图片等待上传，或者已经上传完了几张，在不关闭弹窗组件的前提下，想继续添加图片上传，可以调用下面代码；

// 添加“添加文件”的按钮，
   uploader.addButton({
         id: '#continueUpload',
         label: '继续上传'
     });
上面id是需要调用上传组件的控件的id，这样的话，又可以继续嗨皮的上传图片啦。

你可能感兴趣的:(web前端)