WebUploader单图上传

生成上传对象的基本流程

1. 页面添加组件容器

2. 生成上传对象的工厂方法

参数	含义
id	对应页面的组件容器的id
width	尝试将图片压缩到width的宽度
heigth	尝试将图片压缩到heigth的高度
url	上传链接
uploadSuccess	上传成功回调
uploadError	上传失败回调

function createUpdataFile(id,width,heigth,url,uploadSuccess,uploadError) {
    /**
        兼容IE浏览器
    **/
    var url=url||''
    var width=width||750
    var heigth=heigth||360
    var uploadSuccess=uploadSuccess||function(){}
    var uploadError=uploadError||function(){}
    var id=id||'singlefile'
    var loader= WebUploader.create({
        auto: true,
        swf: '../../../assets/js/Uploader.swf',
        server: url,
        pick: '#'+id,
        fileSingleSizeLimit: 10 * 1024 * 1024,
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png'
        },
        compress: {
            width: width,
            heigth: heigth,
            quality: 40,
            allowMagnify: false,
            crop: false,
            preserveHeaders: true,
            noCompressIfLarger: false,
            compressSize: 0
        }
    });
    
    loader.on('uploadSuccess', function (file, ret) {
        uploadSuccess(ret)
    });
    
    // 文件上传失败，显示上传出错。
    loader.on('uploadError', function (file) {
        uploadError(file)
        $.jGrowl('上传失败！请调整图片大小或更换为jpg格式的图片！', {
            header: '提示信息!',
            theme: 'bg-danger'
        });
    });
    
    
    // 所有文件上传成功后调用
    loader.on('uploadFinished', function () {
        //清空队列
        loader.reset();
    });
    
    return loader
}

3. 生成上传对象

var fileLoader = createUpdataFile('file',750,360,'api',function(res){
    
})

4. 触发上传文件

//上传图片展示
function upladImg() {
    $('#file .webuploader-element-invisible').trigger("click");
}

---

提示：

• png无法压缩