js 本地图片未上传先预览(等比缩小图片内容大小)

//上传图片文件
var uploadFileImage = {
//最大图片数
maxCountImgs : 5,
//图片数
countImgs : 0,
//图片最大值兆
max_size : 1000,
//file 控件id列表集["user_head","two_code_img","brand_logo","aptitude"]
files : null,
//加载多个上传图片事件
loadfileEvent : function(){
for(var i in uploadFileImage.files){
uploadFileImage.fileEvent(uploadFileImage.files[i]);
}
},
//加载单个上传图片事件
fileEvent : function(file_id){
$("input[type=file]#"+file_id).change(function(){
if(!uploadFileImage.previewImage(this,uploadFileImage.max_size)){
//$(".error_"+file_id)[0].style.color="#F15350";
}else{
//$(".error_"+file_id)[0].style.color="#888888";
}
});
},
//显示上传图片方法----file上传file控件，max_size最大小值
previewImage : function(file,max_size) {
var isvalid = true;
var upload_img_length = 0;
if (!file.files || !file.files[0]) {return false; }
//图片格式判断（gif|jpg|jpeg|png|GIF|JPG|PNG）
if (!/.(jpg|jpeg|png|JPG|PNG)$/.test($(file).val())){
isvalid=false;
} else {
//图片大小判断
var filesize = $(file).get(0).files[0].size;
var maxsize = 1024 * max_size;//512kb
if (filesize > maxsize) {
isvalid = false;
} else {
var reader = new FileReader();
reader.readAsDataURL(file.files[0]);
reader.onload = function (evt) {
if (evt.target.result != "") {
var img = new Image();
img.src = evt.target.result;
img.onload = function(){
uploadFileImage.countImgs++;
//相关操作
//var img_src = evt.target.result;
var img_src = uploadFileImage.resizeMe(this,640,file.files[0].type);//等比缩小
uploadFileImage.add_img(file,img_src);//显示本地图片
}
} else{ isvalid = false;}
}
}
}
return isvalid;
},
//重置图片大小方法返回base64 url--- img 图片 ，max_width 最大宽度,imgformat 保存格式
resizeMe : function( img, max_width,imgformat) {
//创建画板
var canvas = document.createElement('canvas');
//图片宽 高设置
var width = img.width;
var height = img.height;
if (width > max_width) {
height = Math.round(height *= max_width / width);
width = max_width;
}
canvas.width = width;
canvas.height = height;
//img.crossOrigin = "*";
//图片画在 画板上
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
//返回画板格式文件
return canvas.toDataURL(imgformat, 0.7);
},
//删除图片方法 ----jqurey元素对象
delete_img : function($obj){
$obj.click(function(){
uploadFileImage.countImgs--;
//$(".imgCount").text(countImgs + "/" + maxCountImgs);
$("label[for=file_imgs]").show();
$(this).parent().remove();
});
},
//添加图片方法
add_img : function(file,img_src){
$(file).parent().children("img").attr("src",img_src);
//$(file).parent().children("img").attr("src",img_src);//原尺寸
$(file).change(null);
$(file).parent().parent().show();
$(file).removeAttr("id");//移除文件id
//$(".imgCount").text(countImgs + "/" + maxCountImgs);
uploadFileImage.delete_img($(file).parent().parent().children(".delete"));//绑定删除图片事件
if(uploadFileImage.countImgs < uploadFileImage.maxCountImgs){
$(file).parent().parent().parent().append(" <li style='display: none;'><label><input type='file' name='file_imgs' id='file_imgs' style='display: none;'/><img src=''/></label><i class='iconfont delete'></i></li>")
uploadFileImage.files = ["file_imgs"];
uploadFileImage.loadfileEvent();
}else{
$("label[for=file_imgs]").hide();
}
}

}