jQuery获取file控件中图片的宽高与大小
问题
如何判断inputfile表单里上传的图片的宽高和大小呢？
解决方案
这个时候图片还没真正上传，也不是在页面上展示，不能使用$(“#id”).width(),$(“#id”).height()这种方式。
在StackOverflow找到一个方法获取inputfile图片文件的宽高：
var_URL=window.URL||window.webkitURL;
$("#file").change(function(e){
varfile,img;
if((file=this.files[0])){
img=newImage();
img.onload=function(){
alert(this.width+""+this.height);
};
img.src=_URL.createObjectURL(file);
}
});
发现可以用，仅在火狐中测试了，其他浏览器兼容性未知，因为后台使用，所以暂且不管兼容性，拿来封装了一下。
我把这个函数完善了一下，获取inputfile图片的宽高和大小，如下：
//获取input图片宽高和大小
functiongetImageWidthAndHeight(id,callback){
var_URL=window.URL||window.webkitURL;
$("#"+id).change(function(e){
varfile,img;
if((file=this.files[0])){
img=newImage();
img.onload=function(){
callback&&callback({"width":this.width,"height":this.height,"filesize":file.size});
};
img.src=_URL.createObjectURL(file);
}
});
}
这里使用了一个回调方法，回调方法的参数是这个json对象，包含宽度、高度和大小，在jQuery中这样调用：
(function(){
//省略其他代码
getImageWidthAndHeight('image_file',function(obj){
if(obj.width!=843||obj.height!=1038){
$.messager.alert('操作提示','弹窗图片宽高必须是843*1038px');
}
});
})(jQuery)
好了，这样就OK了。以上就是jQuery获取intputfile图片的宽高和大小的全部内容了，相信本文的内容会对大家平时使用jQuery和图片上传的时候很有帮助的。