【www.bbyears.com--jquery】
如何判断input file表单里上传的图片的宽高呢？这个时候图片还没真正上传，也不是在页面上展示，不能使用$(“id”).width()这种方式。
在Stack Overflow找到一个方法：
var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
var file, img;
if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
alert(this.width + " " + this.height);
};
img.src = _URL.createObjectURL(file);
}
});
发现可以用，仅在火狐中测试了，其他浏览器兼容性未知，因为后台使用，所以暂且不管兼容性，拿来封装了一下。
这里封装了一个获取input file图片的宽高的函数，如下：
//获取input图片宽高
function getImageWidthAndHeight(id, callback) {
var _URL = window.URL || window.webkitURL;
$("#" + id).change(function (e) {
var file, img;
if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
callback && callback({"width": this.width, "height": this.height});
};
img.src = _URL.createObjectURL(file);
}
});
}
这里使用了一个回调方法。
在jQuery中使用：
(function () {
getImageWidthAndHeight("image_file", function (obj) {
if (obj.width != 843 || obj.height != 1038) {
$.messager.alert("操作提示", result.data.msg, "弹窗图片宽高必须是843*1038px");
}
});
})(jQuery)
这样就OK了。
例子，
部分html代码
jq代码
$(function(){
var imgurl=[];
function createfile(){
$("#updiv").append("");
}
function showimg(url){
var img="";
$("#imglist").append(img);
}
function addfile(){
showimg($(this).val());
$(this).hide();
createfile();
$(".upfile").bind("change",addfile);
}
$(".upfile").bind("change",addfile);
})
js简陋的获取图片方式
// 图片地址 后面加时间戳是为了避免缓存
var img_url = "http://www.qttc.net/static/upload/2013/13643608813441.jpg?"+Date.parse(new Date());
// 创建对象
var img = new Image();
// 改变图片的src
img.src = img_url;
// 打印
alert("width:"+img.width+",height:"+img.height);
返回为0,0
例子，onload后在打印
// 图片地址 后面加时间戳是为了避免缓存
var img_url = "/upload/2013/13643608813441.jpg?"+Date.parse(new Date());
// 创建对象
var img = new Image();
// 改变图片的src
img.src = img_url;
// 加载完成执行
img.onload = function(){
// 打印
alert("width:"+img.width+",height:"+img.height);
};
返回有参数
通过complete与onload一起混合使用
为了测试缓存效果，注意以下测试图片的url都不加时间戳
// 图片地址
var img_url = "static/upload/2013/13643608813441.jpg";
// 创建对象
var img = new Image();
// 改变图片的src
img.src = img_url;
// 判断是否有缓存
if(img.complete){
// 打印
alert("from:complete : width:"+img.width+",height:"+img.height);
}else{
// 加载完成执行
img.onload = function(){
// 打印
alert("from:onload : width:"+img.width+",height:"+img.height);
};
}