如何检查上传

的图片上传前图像的宽度和高度，我写了下面的HTML代码：如何检查上传

<input type="file" id="upload" class="im" onchange="fileSelectHandlerProfile('defaultProfile','true')" style="cursor:pointer"/>

当我们选择图像做，

这个代码将被解雇：

function fileSelectHandlerProfile(title, defalutProfile) { 
    var oFile; 
    oFile = $('#thumbUploadProfile')[0].files[0]; 
    var rFilter = /^(image\/jpeg|image\/png|image\/gif|image\/bmp|image\/jpg|image\/pjpeg)$/i; 
    if (!rFilter.test(oFile.type)) { 
     $('.errorProfile').html('Please select a valid image file (jpg and png are allowed)').show(); 
    } 
}

我想检查文件的宽度和高度，怎么可能像oFile.type？

来源

2014-10-17 user3255765

梅林回答您可以验证并且还使用jQuery的表单验证集成试试这个http://sgeek.org/validate-image-dimension-using-jquery/ – 2017-05-11 16:42:15

可以做到这一点在2个步骤：

使用HTML5文件API读取的图像文件的内容作为数据网址：

var reader = new FileReader(); 
reader.onloadend = function() { 
    //var dataUrl = reader.result; 
    //code as per step 2 here... 
} 
reader.readAsDataURL(oFile); 

//ref: https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsDataURL

现在通过以dataUrl作为src创建Image对象来读取图像大小。

详情：JS - get image width and height from the base64 code

来源

2014-10-17 15:56:57

的FileReader API允许您使用FileReader.readAsDataURL读取文件作为data:网址。使用该URL作为<img />标记的src属性，并阅读该图像的width和height属性。

来源

2014-10-17 16:00:21 ckuijjer

var width; 
    var height; 
    var oFile; 
    oFile = $('#thumbUploadProfile')[0].files[0]; 

    var reader = new FileReader(); 
    reader.onload = function(e){ 
     var image = new Image(); 
     image.onload = function(){    
      width = img.width; 
      height = img.height; 
     } 
     image.src = e.target.result; 
    }; 
    reader.readAsDataURL(oFile);

来源

2014-10-17 16:04:04 Merlin

一个解决方案是加载它clienside并检查高度和宽度。

function fileSelectHandlerProfile(title, defalutProfile) { 
var oFile; 
oFile = $('#thumbUploadProfile')[0].files[0]; 
var rFilter = /^(image\/jpeg|image\/png|image\/gif|image\/bmp|image\/jpg|image\/pjpeg)$/i; 
if (!rFilter.test(oFile.type)) { 
    $('.errorProfile').html('Please select a valid image file (jpg and png are allowed)').show(); 
} 

var picReader = new FileReader(); 

picReader.addEventListener("load", function (event) { 

    var imageObj = new Image(); 
    imageObj.src = event.target.result; 
    imageObj.onload = function() { 
     //TEST IMAGE SIZE 
     if (imageObj.height < 100 || imageObj.width < 100) { 
      $('.errorProfile').html('Please select an image with correct dimensions').show(); 
     } 
    }; 
}); 

//Read the image 
picReader.readAsDataURL(oFile);

}

来源

2014-10-17 16:05:01 user3391726

如何检查上传

回答

相关问题