jQuery获取intput file图片的宽高

如何判断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代码

<div id="upload">
    <form action="{:U('Index/uploadhandler')}" enctype="multipart/form-data" method="post" id="imgform">   
            <div id="imglist">

            </div>
            <div id="updiv">
            <input type='file'  name='photos' class="upfile">
            </div>             
            <input type="submit" value="提交">
    </form>
</div>

jq代码

$(function(){
        var imgurl=[];
        function createfile(){
        $('#updiv').append("<input type='file'  name='photos' class='upfile'>");
        }
        function showimg(url){
            var img='<img src="'+url+'"/>';
            $('#imglist').append(img);
        }
        function addfile(){
            showimg($(this).val());
            $(this).hide();
            createfile();
            $('.upfile').bind('change',addfile);
        }
        $('.upfile').bind('change',addfile);
    })

js简陋的获取图片方式

// 图片地址 后面加时间戳是为了避免缓存
var img_url = 'yun_qi_img/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);
    };
}