标签：open 最好 ase TBase failed toc 点击 固定 err
基本的原理就是将图片格式转换成base64格式的，进行压缩，然后再转回固定格式的图片文件，大的形式是以form表单形式进行后台交互的，但里面会new一个form和一个XMLHttpRequest对象，这样可以弥补form表单提交文件没有失败返回的空缺，当限制使用jquery里的AjaxForm的时候，这也是一个很好的选择。
var bl = convertBase64UrlToBlob(base64Codes);
form.append("fileupload", bl, "file_"+Date.parse(new Date())+".jpg")
以下代码是压缩图片的源码，项目里面可以直接拿来复用的：
var xhr;
var fileObj = document.getElementById("postPic").files[0]; // js 获取文件对象
var url = ctx+‘/ucenter/activityZp/uploadFileDataAjax‘;//后台接口地址
var form = new FormData(); // FormData 对象
form.append("act_id",id);
form.append("studentIdAndSchoolId",studentId);
//alert("原始大小===="+fileObj.size/1024);
if(fileObj.size/1024 > 2048) { //大于2M，进行压缩上传
photoCompress(fileObj, {
quality: 0.5//压缩比例
}, function(base64Codes){
var bl = convertBase64UrlToBlob(base64Codes);
form.append("fileupload", bl, "file_"+Date.parse(new Date())+".jpg");
xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
xhr.onload = uploadComplete; //请求完成
xhr.onerror = uploadFailed; //请求失败
xhr.send(form); //开始上传，发送form数据
//alert("压缩过")
});
}else {
photoCompress(fileObj, {
quality: 1
}, function(base64Codes){
var bl = convertBase64UrlToBlob(base64Codes);
form.append("fileupload", bl, "file_"+Date.parse(new Date())+".jpg");
xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
xhr.onload = uploadComplete; //请求完成
xhr.onerror = uploadFailed; //请求失败
xhr.send(form); //开始上传，发送form数据
});
}
注意：代码里面点击input的时候，触发选中照片以后，触发以上的压缩图片事件，过程中会new FormData，生成另外一个input，如果同一张图片上传两次，并且都失败，这样就会有可能触发两次交互，导致接口重复调用，以及第二次状态提示框点击事件失效，最好在第一次完成以后刷新当前页面或者找方法销毁这个formdata；
<div id="inputReset">
<input type="file" name="fileupload" accept="image/*" id="postPic" onchange="loadImg()">
</div>
标签：open 最好 ase TBase failed toc 点击 固定 err
原文地址：https://www.cnblogs.com/sakura-lifangfang/p/9644148.html
