js压缩上传图片并预览
$("#inputId").change(function() {
var objUrl = getObjectURL(this.files[0]);
if(objUrl) {
//实现预览
$("#imgId").attr("src", objUrl);
//上传
uploadImage(objUrl);
}
}
getObjectURL:function(file){
var url = null ;
if (!=undefined) { // basic
url = (file) ;
} else if (!=undefined) { // mozilla(firefox)
url = (file) ;
} else if (!=undefined) { // webkit or chrome
url = (file) ;
}
return url ;
},
//压缩图片
compress:function(image){
var height = ;
var width = ;
var canvas = ('canvas');
//height、 width 和图片实际的高、宽一致时，直接赋值canvas的宽高为上述宽高
= width;
= height;
var ctx = ('2d');
= '#FFF';//绘制背景色
(0, 0, , );
(image, 0, 0, , );
//0.5为压缩的质量比例，范围是0~1。
var imgBase = ("image/jpeg", 0.5);
//转成Blob对象，以ajax的方式上传
var formData = new FormData();
var arr = (",");
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = ;
var u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = (n);
}
var obj = new Blob([u8arr],{type:mime});
("imageFiles",obj,);
return formData;
//这里是用了toDataURL,然后再转成了blob，直接用不知道好不好使。
},
//上传方法
uploadImage:function(objUrl){
var image = new Image();
= objUrl;
= function () {
var formData = new FormData();
//必须以这种方式获取，以JQuery的方式获取不到
var file = (location).files[0];
if( > 1024*1024){
//大于1M的时候压缩
formData = compress(image);
}else{
("imageFiles", file, );
}
//然后可以添加你所需要一起传到后台的参数
("paramName","paramValue");
$.ajax({
url:"url",
type:"post",
data:formData,
//以下两行不能丢
processData: false,
contentType: false,
success：function(data){
......
}
error:function(data){
......
}
})
}
},