js 图片尺寸与格式验证
这是楼主在项目中用到的对图片大小以及格式的验证。
//图片大小验证
if(check(fileId)){
var fileObj = document.getElementById(fileId).files[0]; // 获取文件对象
var reader = new FileReader(); // 新建FileReader对象，
reader.readAsDataURL(fileObj); //将文件读取为DataURL，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL， Data URL 是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。reader.onload = function(){ //当图片读取为DataURL完成后执行方法
var img = new Image; //新建image对象
img.src = this.result; // 将上传的图片对象付值给img对象
img.onload = function(){ //当图片加载完毕执行如下方法if(img.width>750 || img.height!=35){ //判断图片的高宽
layer.open({
title: '提示',
content: '图片高度应为35像素，宽度不能超过750像素'
})
}else{
// FormData 对象
var form = new FormData(); /下面是楼主项目中的逻辑业务，大家不用看
var creOrUpd=paramId.substring(0,6);
form.append("file", fileObj);// 文件对象
$.ajax({
url : "upload.json",
type : 'POST',data : form,timeout : 10000,processData : false,contentType : false,
success : function(data) {
if (data.result == 1){
$("#"+paramId).html(data.obj);
$("#"+creOrUpd+"ChannelForm").find("#channelPic").val(data.obj)
}
layer.msg("上传成功");
},
error : function handleAjaxError(xhr, textStatus, error) {
modalfun({width:clientWidth * 0.2,title:"提示",content:"
"+message[textStatus]+"
",textSure:"确认",cancelHide:true});
}
});
}
}
}
}
}
/**
* 上传格式验证
* @param fileId
*/
function check(fileId){
var file = document.getElementById(fileId).files[0]; //文件对象
if(file==undefined){//判断是否选择了图片
modalfun({width:clientWidth * 0.2,title:"提示",content:"
请选择一张图片!
",textSure:"确认",cancelHide:true});
return false;
}
if(!/image\/\w+/.test(file.type)){ //判断类型是不是图片
modalfun({width:clientWidth * 0.2,title:"提示",content:"
请确保文件为图像类型!
",textSure:"确认",cancelHide:true});
return false;
}
return true;
}