如何在上传前预览图像，获取文件大小、图像高度和宽度？

Question

如何在上传前预览图像，获取文件大小、图像高度和宽度？

在上传到我的网站之前，如何使用jQuery或JavaScript获取文件大小、图像高度和宽度？

Answer 1

如果您可以使用jQuery验证插件，您可以这样做：HTML：<input&nbsp;type="file"&nbsp;name="photo"&nbsp;id="photoInput"&nbsp;/>JavaScript：$.validator.addMethod('imagedim',&nbsp;function(value,&nbsp;element,&nbsp;param)&nbsp;{ &nbsp;&nbsp;var&nbsp;_URL&nbsp;=&nbsp;window.URL; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;&nbsp;img; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;((element&nbsp;=&nbsp;this.files[0]))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img&nbsp;=&nbsp;new&nbsp;Image(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img.onload&nbsp;=&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log("Width:"&nbsp;+&nbsp;this.width&nbsp;+&nbsp;"&nbsp;&nbsp;&nbsp;Height:&nbsp;"&nbsp;+&nbsp;this.height); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//this&nbsp;will&nbsp;give&nbsp;you&nbsp;image&nbsp;width&nbsp;and&nbsp;height&nbsp;and&nbsp;you&nbsp;can&nbsp;easily&nbsp;validate&nbsp;here.... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this.width&nbsp;>=&nbsp;param&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img.src&nbsp;=&nbsp;_URL.createObjectURL(element); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}});该函数作为ab onload函数传递。代码取自这里

Answer 2

演示不确定这是否是你想要的，只是简单的例子：var&nbsp;input&nbsp;=&nbsp;document.getElementById('input');input.addEventListener("change",&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;file&nbsp;&nbsp;=&nbsp;this.files[0]; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;img&nbsp;=&nbsp;new&nbsp;Image(); &nbsp;&nbsp;&nbsp;&nbsp;img.onload&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;sizes&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:this.width, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;this.height&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;URL.revokeObjectURL(this.src); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('onload:&nbsp;sizes',&nbsp;sizes); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('onload:&nbsp;this',&nbsp;this); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;objectURL&nbsp;=&nbsp;URL.createObjectURL(file); &nbsp;&nbsp;&nbsp;&nbsp;console.log('change:&nbsp;file',&nbsp;file); &nbsp;&nbsp;&nbsp;&nbsp;console.log('change:&nbsp;objectURL',&nbsp;objectURL); &nbsp;&nbsp;&nbsp;&nbsp;img.src&nbsp;=&nbsp;objectURL;});