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前端)