獲取上傳圖像的寬度（上傳文件到服務器之前）

Question

我有一些代碼，我改變了。這是prevusly得到文件分機。我希望它能夠獲得洪流圖像的寬度（甚至在點擊提交輸入之前），如果它太小，就會發出警報。問題是，我真的不知道我可以如何連接這個JS代碼與HTML格式。

<form id="add" method="POST" enctype="multipart/form-data" action="upload.php"> 
<input type="file" id= "filput" style="margin-bottom:30px; margin-top:20px;" name="file" size="40" /> 
</form> 


$("#filput").on('change', function() { 
    var w = $(this).width(); 
    if (w < 500) { 
     alert("too small"); 
    } else { 
     alert("big"); 
    } 
}); 

Answer 1

的this referrs於輸入不是圖像。您也使用HTML5文件API。

你可以用這個例子：How to get the image width from html 5 file API

代碼示例：從複製：Getting Image Dimensions using Javascript File API

$("#filput").on('change', function() { 
    var fr = new FileReader; 

    fr.onload = function() { // file is loaded 
     var img = new Image; 

     img.onload = function() { 
      alert(img.width); // image is loaded; sizes are available 
     }; 

     img.src = fr.result; // is the data URL because called with readAsDataURL 
    }; 

    fr.readAsDataURL(this.files[0]); // I'm using a <input type="file"> for demonstrating 
});