javascript - 在表单提交之前获取上传图像的图像高度和宽度

Question

如何在表单提交之前使用 jQuery 或 Javascript获取上传图像的高度和宽度？

<input type="file" />

我需要检查要上传的图像的宽度和高度是否等于选择的宽度和高度。我找到了这个链接。但它只适用于 FF 和 Chrome，不适用于 IE7 和 IE8。

谁能告诉我任何其他方法来获取尺寸以便它在所有浏览器中工作？

Answer 1

您可以创建一个图像对象，创建图像对象后，从显示要上传的图像的图像标签中获取图像，然后您可以按照前面写的方法获取图像的尺寸。

var v=new Image();
v.src=document.getElementById("up_img").getAttribute('src');
alert(v.width);

请记住，您必须使用 Base64 方法来获取要在图像标签中显示的图像，我不知道 ie 是否支持它，但它是 Chrome、Firefox、Opera 中可用的 HTML5 工具。

Answer 2

出于安全考虑，IE9、IE8、IE7不支持访问客户端电脑上的文件；这就是为什么你没有得到任何宽度或高度的原因。您需要将图像上传到服务器上，然后将其显示到某个图像控件并获取高度和宽度。您可以设置visibility:hidden是否不希望图像可见。

鸟瞰图

一种方法是在上传时显示进度条，同时使用 Ajax 将文件保存到服务器上的临时文件夹中，并将图像名称作为临时 ID 并将 ID 存储在数据库中（以便稍后删除它) 然后将其显示在图像控件中。然后得到高度和宽度。