window.changepic4 = function() {
var file = $("#form").find("input")[3].files[0];
var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
if(!rFilter.test(file.type)) {
alert("文件格式必须为图片");
return;
}
/*开始进行网络加载*/
var reader = new FileReader() , image = new Image() ,
canvas = document.createElement("canvas") , ctx = canvas.getContext("2d");
reader.onload = function() { //文件加载完成
var url = reader.result;
image.src = url;
};
image.onload = function() { //图片加载完成
var w = image.naturalWidth , h = image.naturalHeight ,
scale = 2; //图片缩放比例,这里是把图片大小高宽均缩小3倍
canvas.width = w / scale;
canvas.height = h / scale;
ctx.drawImage(image, 0 , 0 , w , h ,
0 , 0 , canvas.width , canvas.height);
fileUpload();
};
reader.readAsDataURL(file); //用文件加载器加载文件
function fileUpload() { //文件上传方法
var quality = 0.2; //图片的质量,这里设置的是0.3
var data = canvas.toDataURL("image/jpeg", quality);//获取画布图片,并且要jpg格式
data = data.split(',')[1];
data = window.atob(data);
var ia = new Uint8Array(data.length);
for(var i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i);
}
var blob4 = new Blob([ia], { //以上均为二进制参数处理,从而获取一个blob对象
type: "image/jpeg"
});
var fd = new FormData(document.getElementById("form4"));
fd.append('jsonStr',jsonStr);
fd.append('token',token);
fd.append("leader_IDZ" , blob4 , "leader_IDZ.jpg"); //向form中加入图片数据,name属性是XXX,文件名是upload.jpg
var xhr = new XMLHttpRequest();
xhr.addEventListener('load', function(resUpload) {
//请求成功
}, false);
xhr.addEventListener('error', function(){
//请求失败
}, false);
xhr.addEventListener('abort', function(){
//上传终止
}, false);
xhr.open('POST', "http://ap.jvjiewang.com/Seller/Shop/OpenExamine");//请求地址
xhr.send(fd);//发送
}
};
移动端图片压缩上传
猜你喜欢
转载自blog.csdn.net/qq_38674970/article/details/80940145
今日推荐
周排行