使用Javascript上传前请检查图像的宽度和高度

我有一个用户可以放置图像的表单的JPS：

<div class="photo"> <div>Photo (max 240x240 and 100 kb):</div> <input type="file" name="photo" id="photoInput" onchange="checkPhoto(this)"/> </div> 

我写了这个js：

 function checkPhoto(target) { if(target.files[0].type.indexOf("image") == -1) { document.getElementById("photoLabel").innerHTML = "File not supported"; return false; } if(target.files[0].size > 102400) { document.getElementById("photoLabel").innerHTML = "Image too big (max 100kb)"; return false; } document.getElementById("photoLabel").innerHTML = ""; return true; } 

这工作正常，以检查文件的types和大小。 现在我想检查图像的宽度和高度，但我不能这样做。
我已经尝试与target.files[0].width但我undefined 。 用其他方法我得到0 。
有什么build议么？

Answer 1

该文件只是一个文件，你需要像这样创build一个图像：

 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); } }); 

演示： http : //jsfiddle.net/4N6D9/1/

我认为这只是在less数浏览器中支持。 主要是Firefox和Chrome，现在也可能是歌剧。

Answer 2

我同意。 一旦它被上传到用户的浏览器可以访问的地方，那么获得大小是相当容易的。 当你需要等待图像加载，你会想要钩入img的onload事件。

 var width, height; var img = document.createElement("img"); img.onload = function() { // `naturalWidth`/`naturalHeight` aren't supported on <IE9. Fallback to normal width/height // The natural size is the actual image size regardless of rendering. // The 'normal' width/height are for the **rendered** size. width = img.naturalWidth || img.width; height = img.naturalHeight || img.height; // Do something with the width and height } // Setting the source makes it start downloading and eventually call `onload` img.src = "http://your.website.com/userUploadedImage.jpg";