使用javascript获取文件标签中的图像高度和宽度[重复]答案

【问题标题】：get image height and width in file tag using javascript [duplicate]使用javascript获取文件标签中的图像高度和宽度[重复]
【发布时间】：2011-07-09 21:21:16
【问题描述】：

可能的重复：
get image height and width in file tag javascript
Determining image file size + dimensions via Javascript?
How to upload preview image before upload through JavaScript

如何在文件标签中不刷新页面的情况下获取图像的高度和宽度？

<HTML>
<HEAD>
    <TITLE></TITLE>
    <script language="javascript">
    function getW()
    {
        var theImg = document.getElementById('testimg');
        alert(theImg.width);
    }

    function getH()
    {
        var theImg = document.getElementById('testimg');
        alert(theImg.height);
    }
    </script>
</HEAD>

<BODY>        
<input type="file" id="testimg"/>
    <input type="button" value="get Width" onclick="getW()"/>
    <input type="button" value="get Height" onclick="getH()"/>
</BODY>
</HTML>

我使用 php 代码获取图像的图像高度和宽度，但是那个时候页面将被刷新，没有页面刷新我得到图像大小但不是高度和宽度....

【问题讨论】：

懒惰？ 2个这样的问题一个接一个？ stackoverflow.com/questions/6633190/…
stackoverflow.com/questions/4094012/… stackoverflow.com/questions/1310378/…

标签： javascript

【解决方案1】：

使用onload 事件：

document.getElementById('testimg').onload = function() {
  alert(document.getElementById('testimg').offsetHeight);
}

您可以更改函数中的操作，例如，让您的按钮可见或不禁用，由您决定。

不确定我是否理解您的问题，但 Javascript 需要先加载图像，然后才能获取其尺寸。

【讨论】：

【解决方案2】：

这是不可能以跨浏览器的方式做到的。

我想到的唯一跨浏览器方式（但并不简单）是上传文件 ajax 样式，渲染该图像（可以隐藏）并使用 img.width 和 img.height 获取其大小。

希望这会有所帮助。干杯

【讨论】：