Kiểm tra và chiều cao trước khi tải lên với Javascript

Question

Tôi có một JPS với một hình thức trong đó người dùng có thể đặt một hình ảnh:

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

tôi viết bài này 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; 
} 

mà làm việc tốt để kiểm tra loại tập tin và kích thước. Bây giờ tôi muốn kiểm tra chiều rộng và chiều cao của hình ảnh nhưng tôi không thể làm điều đó.
Tôi đã thử với target.files[0].width nhưng tôi nhận được undefined. Với các cách khác, tôi nhận được 0.
Bất kỳ đề xuất nào?

Answer 1

Các tập tin được chỉ là một tập tin, bạn cần phải tạo ra một hình ảnh như vậy:

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

Demo: http://jsfiddle.net/4N6D9/1/

Tôi lấy nó, bạn nhận ra điều này chỉ được hỗ trợ trong một vài trình duyệt . Chủ yếu là firefox và chrome, có thể là opera cũng như bây giờ.

Answer 2

Tôi đồng ý. Một khi nó được tải lên một nơi nào đó trình duyệt của người dùng có thể truy cập thì nó là khá dễ dàng để có được kích thước. Khi bạn cần phải chờ tải hình ảnh, bạn sẽ muốn móc vào sự kiện onload cho img.

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"; 

Answer 3

Theo quan điểm của tôi là câu trả lời hoàn hảo bạn phải yêu cầu là

var reader = new FileReader(); 
    //Read the contents of Image File. 
    reader.readAsDataURL(fileUpload.files[0]); 
    reader.onload = function (e) { 
    //Initiate the JavaScript Image object. 
    var image = new Image(); 

    //Set the Base64 string return from FileReader as source. 
         image.src = e.target.result; 

         //Validate the File Height and Width. 
         image.onload = function() { 
          var height = this.height; 
          var width = this.width; 
          if (height > 100 || width > 100) { 
           alert("Height and Width must not exceed 100px."); 
           return false; 
          } 
          alert("Uploaded image has valid Height and Width."); 
          return true; 
         }; 

        }