-
解决手机上传图片时的旋转问题，采用H5图片压缩技术
资源介绍
使用规范：
var file = $("#file_input")[0].files[0];
if(file.size / 1024 > 1024 * 5){
mui.toast('图片不能超过5M');
return;
}
//图片压缩
compress.rotatePhotoCompress(file,function(imageObj){
var formData = new FormData();
formData.append("uploadFile", imageObj, file.name); // 文件对象
//图片上传
uploadAdd(formData);
});
/**
* 图片上传
* @param formData
*/
function uploadAdd(formData){
var URL = apiUrl.addMultImageURL+"?plateTag=order&fileOwnerId=order&fileType=image&token;="+app.getToken();
$.ajax({
url: URL, //请求地址
type: "post",
async: true, //默认为异步
data: formData, //参数
contentType: false, //数据请求格式
processData:false,
xhr:function(){
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // check if upload property exists
myXhr.upload.addEventListener('progress',function(e){
//显示进度条
$("#progress1").show();
var loaded = e.loaded;//已经上传大小情况
var tot = e.total;//附件总大小
var per = Math.floor(100*loaded/tot); //已经上传的百分比
mui("#progress1").progressbar({progress:per}).show();
}, false); // for handling the progress of the upload
}
return myXhr;
},// 成功
success: function (data) {
//隐藏进度条
$("#progress1").hide();
if (data.error == 0 && null != data.url) {
mui.toast('上传图片成功');
$('.show_img').append("
X
<input type='hidden' name='imgUrls["+count+"]' value="+data.url.replace(app.fileUrl,"")+"></div>");
count++;
} else {
mui.toast('上传图片失败');
$('#uploadPicButton').html('请你选择图片重新上传');
}
},
error:function(rep) {
$("#progress1").hide();
console.log(JSON.stringify(rep));
mui.toast('上传异常');
}
})
}
- 上一篇: 移动端H5图片压缩上传
- 下一篇: H5快照+下载图片到本地+源码