该博客介绍了如何使用lrz库对本地图片进行压缩，然后利用jQuery配合formData上传压缩后的图片。通过示例代码展示了文件改变事件触发的图片压缩及上传流程，以及直接上传原图的方法。上传过程中使用Promise处理异步操作，后端接口用于接收并处理上传的图片。
/**
* 本地图片压缩后上传
*/
$("#vfile").change(function(){
var _this = $(this);
lrz(this.files[0]).then(function(data) {
return upload(_this.get(0) , data.formData);
}).then(function(data) {
// data => 上传成功后返回的JSON数据
// TODO::处理逻辑
}).catch(function(err) {
console.log(err);
});
});
/**
* 直接上传原图
*/
$("#vfile").change(function(){
upload(this).then(function(data) {
// data => 上传成功后返回的JSON数据
// TODO::处理逻辑
}).catch(function(err) {
console.log(err);
});
});
/**
* 图片上传 后端正常处理图片
* @param selector 文件域DOM Obj [必选]
* @param formData 文件上传formData [可选]
*/
function upload(selector , formData) {
if(!formData) {
formData = new FormData();
formData.append("file", $(selector)[0].files[0]);
}
var url = "{:U('Wap/Public/ajaxSingleUpload')}";
return new Promise(function(resolve,reject){
$.ajax({
url : url,
type : 'POST',
data : formData,
processData : false,
contentType : false,
dataType:"json",
success : function(response) {
resolve(response);
},
error : function(response) {
reject(response);
}
});
});
}
扫一扫
3764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
