项目里边这次用到了移动端上传图片,拿出来分享下。
1.首先是思路,在input 发生change的时候判断浏览器时候支持图片预览,支持的情况下校验图片的格式,图片的大小,之后将拿到的图片进行canvas压缩,图片转base64,然后上传。
2.代码
$(".file").on("change", function() {
var that = $(this);
//判断是否支持FileReader
if(window.FileReader) {
var reader = new FileReader();
} else {
$(".u-pop").showTip("您的设备不支持图片预览功能,如需该功能请升级您的设备!", "", "确定");
}
//获取文件
var file = $(this)[0].files[0];
var imageType = /^image\//;
//是否是图片
if(!imageType.test(file.type)) {
$(".u-pop").showTip("请选择正确图片!", "", "确定");
return;
}
if(file.size / 1024 / 1024 > 5) {
$(".u-pop").showTip("图片不能大于5M!", "", "确定");
return;
}
if(imglength == 4) {
that.parent().hide();
}
//读取完成
reader.onload = function(e) {
var image = new Image();
image.src = e.target.result;
//alert(e.target.result.length)
var base64 = null;
image.onload = function() {
var expectWidth = this.naturalWidth;
var expectHeight = this.naturalHeight;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = expectWidth;
canvas.height = expectHeight;
ctx.drawImage(this, 0, 0, expectWidth, expectHeight, 0, 0, expectWidth, expectHeight);
base64 = canvas.toDataURL("image/jpeg", 0.3);//0.3为降低的品质数
//alert(base64.length)
//获取图片dom
var section = document.createElement('section');
section.setAttribute("class", "up-section ");
var imgdelete = document.createElement("img");
imgdelete.setAttribute("src", "");
var img = document.createElement("img");
var addimg = document.getElementsByClassName("addimg")[0]
//图片路径设置为读取的图片
img.src = base64;
img.className = "up-img";
section.appendChild(img);
that.parent().before(section);
};
};
reader.readAsDataURL(file);
});
3.请求后台接口
var files = list.eq(i).find(".slides-show img");
var fd = new Array();
for(var j = 0; j < files.length; j++) {
fd[j] = files[j].src;
};
$.ajax({
url: xxx,
type: 'post',
data: {
token: token,
datalist: fd
},
traditional: true,//fd为数组是需要加
//processData: false,
//contentType: false,
success: function(data) {
$(".u-pop").showTip(" 评价成功!");
var t = setTimeout(function() {
window.history.go(-1);
clearTimeout(t);
}, 1000);
},
error: function(e) {
$(".u-pop").showTip("评价失败", "", "确定");
}
});
不足知促没有用formdata做二进制的处理,原因后端暂时不支持。