获取上传图像的宽度（上传文件到服务器之前）

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