如何使用JavaScript获取上传图片宽高并替换指定HTML元素内容

核心实现逻辑 #

• 监听文件上传框的change事件获取用户选中的图片文件
• 生成临时资源地址加载图片，等图片加载完成后读取原生宽高
• 用拿到的尺寸内容覆盖目标元素的原有内容

适配现有代码结构的完整实现 #

你可以直接把以下代码替换到你现有的业务逻辑中，不需要改动原有HTML结构，仅需要把选择器替换为你实际使用的元素ID/类名即可：

const uploadEl = document.querySelector('#你的上传框选择器')
const targetEl = document.querySelector('#你要替换内容的元素选择器')

uploadEl.addEventListener('change', (e) => {
  const selectedFile = e.target.files[0]
  // 非图片类型直接做提示
  if (!selectedFile || !selectedFile.type.startsWith('image/')) {
    targetEl.innerText = '请上传有效图片文件'
    return
  }

  const tempImage = new Image()
  tempImage.src = URL.createObjectURL(selectedFile)

  tempImage.onload = () => {
    // naturalWidth/naturalHeight 为图片真实像素尺寸，不受页面样式影响
    const width = tempImage.naturalWidth
    const height = tempImage.naturalHeight
    // 替换目标元素内容，展示格式可以按需调整
    targetEl.innerText = `宽度：${width}px，高度：${height}px`
    // 清理临时资源，避免内存泄漏
    URL.revokeObjectURL(tempImage.src)
  }
})

关键注意点 #

• 必须在图片的onload事件回调中读取尺寸，否则图片未加载完成会得到0值
• 不要用width/height属性读取尺寸，这两个属性返回的是图片在页面上的渲染尺寸，可能和原图真实尺寸不一致

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