webUploader使用方法

官网

http://fex.baidu.com/webuploader/

API

http://fex.baidu.com/webuploader/doc/index.html

引入webuploader.css webuploader.min.js

DOM

<div id="uploaderAvatar" class="display_none">

    <!--用来存放文件信息-->

    <div id="Avatarthelist" class="uploader-list"></div>

    <div class="btns">

        <div id="Avatarpicker">选择文件</div>

    </div>

</div>

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