生成上传对象的基本流程
- 页面添加组件容器
<div id="file" style="display: none;"></div>
<div onclick="upladImg()"></div>
- 生成上传对象的工厂方法
| 参数 |
含义 |
| 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
}
- 生成上传对象
var fileLoader = createUpdataFile('file',750,360,'api',function(res){
})
- 触发上传文件
//上传图片展示
function upladImg() {
$('#file .webuploader-element-invisible').trigger("click");
}
提示：
