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,这样的话,又可以继续嗨皮的上传图片啦。