JavaScript网页上传图片后获取宽高返回0/undefined的解决方案问询

你设置图片src属性后立刻读取尺寸，此时浏览器还未完成图片资源的加载解析，对应的宽高属性还没有被赋值，因此会返回0或者undefined。

只需要在图片的load事件触发后再读取尺寸即可，load事件代表图片资源已经完全加载完成，此时可以拿到正确的数值。
你可以直接修改原有loadFile函数，修改后的完整代码如下：

<p><input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile(event)" style="display: none;"></p>
<p><label for="file" style="cursor: pointer;">Upload Image</label></p>
<p><img id="output"/></p>

<script>
var loadFile = function(event) {
    const outputImg = document.getElementById('output');
    // 先绑定加载完成回调，再设置src，避免缓存场景下事件提前触发
    outputImg.onload = function() {
        // 获取图片原始分辨率，不受页面样式影响
        console.log('图片原始宽度：', this.naturalWidth);
        console.log('图片原始高度：', this.naturalHeight);
        // 如果需要获取图片在页面上实际渲染的尺寸，使用以下属性
        console.log('图片渲染宽度：', this.clientWidth);
        console.log('图片渲染高度：', this.clientHeight);
    };
    outputImg.src = URL.createObjectURL(event.target.files[0]);
};
</script>

• naturalWidth/naturalHeight：返回图片本身的真实分辨率，和页面展示样式、缩放无关，绝大多数场景下用这两个属性即可
• clientWidth/clientHeight：返回图片在当前页面中实际渲染出来的尺寸，会受CSS设置、父容器大小、页面缩放的影响

如果你不需要在页面上展示图片就想提前获取尺寸，也可以单独创建临时Image对象加载资源：

var loadFile = function(event) {
    const tempImg = new Image();
    tempImg.onload = function() {
        console.log('原始宽度：', this.naturalWidth, '原始高度：', this.naturalHeight);
        // 拿到尺寸后再给页面展示的img赋值，按需使用
        document.getElementById('output').src = this.src;
    };
    tempImg.src = URL.createObjectURL(event.target.files[0]);
};

内容的提问来源于stack exchange，提问作者nostradam