webUploader使用方法
来源:互联网 发布:oracle数据库打不开 编辑:程序博客网 时间:2024/05/17 01:51
官网
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
0 0
- webUploader使用方法
- webuploader
- webuploader
- webuploader
- WebUploader API
- webuploader踩坑
- WebUploader上传
- WebUploader使用
- webuploader上传文件插件
- webuploader 使用实例
- 上传控件 WebUploader
- 文件上传 webuploader
- webuploader上传文件组件
- webuploader 手动提交问题
- 初用webUploader学习笔记
- webuploader设置timeout
- webuploader的使用
- webuploader文件接收服务端
- Md5
- 最短路(SPFA、Dijkstra、Floyd、Bellman-Ford)
- RedisTemplate的使用说明(序列化以及事物)
- document的createDocumentFragment()方法
- [SIM]MT6572打开3G switch功能,卡槽2不识别SIM卡
- webUploader使用方法
- 文章标题
- 背景自适应代码
- 《R语言统计入门》学习笔记<一>
- 八、函数对象
- div 隐藏和显示方式
- 转:PTSAC
- Cocos2d-x常见面试题
- dlopen “no suitable image found ”问题之解决