webUploader使用方法

官网
http://fex.baidu.com/webuploader/
API
http://fex.baidu.com/webuploader/doc/index.html

 

引入webuploader.css webuploader.min.js

 

DOM

 

   
   

   

       

选择文件

   

 

JS
// 上传企业头像的代码
var BASE_URL = 'http://localhost:3000';
var avatarUploader = WebUploader.create({
    swf: BASE_URL + '/webUploader/Uploader.swf',
    server: BASE_URL + '/company/uploadCompanyImg',
    pick: '#Avatarpicker',
    resize: false,
    formData: {},
    method: 'POST',
    chunked: true,
    extensions: 'gif,jpg,jpeg,bmp,png',
    mimeTypes: 'image/*',
    compress: {
        width: 180,
        height: 180,
        quality: 90,
        allowMagnify: false,
        crop: false,
        preserveHeaders: true,
        noCompressIfLarger: false,
        compressSize: 307200
    },
});
avatarUploader.on('startUpload', function () {
    layer.open();
});
avatarUploader.on('uploadFinished', function () {
    $('.uploadProgressBg').css({'width': '1%'});
});
avatarUploader.on('uploadSuccess', function (file, response) {
    console.log(response);
});
avatarUploader.on('uploadProgress', function (file, percentage) {
    var mypercentage = parseInt(percentage * 100);
});
avatarUploader.on('uploadError', function (file, reason) {
    console.log(reason);
});
avatarUploader.on('error', function (type) {
    layer.msg('文件大小超出限制,请控制在300KB以内');
});

 

WebUploader.create中常用的属性是 pick formData 还有压缩大小的等等。

 

常用事件是startUpload，uploadFinished，uploadProgress，uploadError，error

 

uploadProgress 就是实时进度

 

坑点：
1.无法通过代理来截取file表单，需要通过直接地获取
如
$('#Avatarpicker .webuploader-element-invisible').trigger('click’).on(‘change’, function() {});
2.它提交的是Form表单
$(‘#mybutton’).on(‘click’, function() {
avatarUploader.option('formData', {
    isBaseCode: 1,
    picName: oCompanyDetail.uploadPic.picName,
    dataUrl: oCompanyDetail.uploadPic.dataUrl
});
此处formData是除了图片外别的字段

 

在Express中，此处是Base64码处理方式，直接上传图片的话，在files中可以获取
var form = new multiparty.Form();
form.parse(req, function (err, fields, files) {
    var isBaseCode = parseInt(fields.isBaseCode);
    if (isBaseCode) {
        var picName = fields.picName.toString();
        var dataUrl = fields.dataUrl.toString();
        var base64Data = dataUrl.replace(/^data:image\/png;base64,/,"");
        var f = new AV.File(picName, {
            base64: base64Data
        });
        try {
            f.save().then(function (fileObj) {
                res.send({
                    "code": 0,
                    "message": "上传成功",
                    "url": fileObj.url(),
                    "id": fileObj.id,
                });
            });
        } catch (err) {
            console.log('uploadFile - ' + err);
            res.status(502);
        }
    } else {
        if (req.busboy) {

 

        } else {
            console.log('uploadFile - busboy undefined.');
            res.status(502);
        }
    }
});   
3.上传图片时候，有图片文件的话，uploadProgress是有实时进度，而上传Base64没文件的话，uploadProgress中只有一次1(100%)这样的提示。做进度的时候，第二种只能通过视觉欺骗用户有进度条。

 

4.上传图片与文字时候，formData中不能存在id,name两个字段，否则会被默认字段覆盖。解决办法是自己改自己的代码。。。。

5.Avatarpicker这个div中的内容，是在组件初始化之后才创建的，不知道为何写不了事件代理。只能通过$('#Avatarpicker .webuploader-element-invisible').trigger('click’).on(‘change’, function() {});   即 坑点1