获取上传图像的宽度(上传文件到服务器之前)
问题描述:
我有一些代码,我改变了。这是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");
}
});
答
的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
});
+0
我不鼓励您使用FileReader来完成此任务。你冒着耗尽浏览器内存的风险,更不用说这是一个令人难以置信的无效操作,尤其是当涉及大型文件时。相反,使用URL.createObjectURL,传入文件或blob。然后,将此调用的结果设置为img的src attr。 –
'$(本)'在 '变' 的处理程序是指'#filput'元素,而不是您上传的图片。 – Derek