Javascript拖拽上传图片无法获取Height & Width，求解决方案

问题出在图片加载时机上——你设置img.src后，图片还没完成加载，此时直接获取宽高会得到0或者不准确的值，不管是按钮上传还是拖拽上传都存在这个问题。正确的做法是监听图片的load事件，在图片完全加载后再获取宽高信息。

修改你的fileHandler函数，调整如下：

const fileHandler = (file, name, type) => {
  if (type.split("/")[0] !== "image") {
    error.innerText = "Please upload an image file";
    return false;
  }
    
  error.innerText = "";
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = () => {
    let imageContainer = document.createElement("figure");
    let img = document.createElement("img");
      
    img.src = reader.result;
    // 监听图片加载完成事件，此时才能获取准确的宽高
    img.onload = () => {
      const width = img.width;
      const height = img.height;
      // 这里可以处理宽高信息，比如添加到figcaption或者做其他逻辑
      imageContainer.innerHTML += `<figcaption>${name} (${width}×${height})</figcaption>`;
    };
    imageContainer.appendChild(img);
    imageDisplay.appendChild(imageContainer);
  };
};

关键修改点： #

• 给创建的img元素添加onload事件回调，图片加载完成后才执行宽高获取逻辑
• 将原本直接拼接figcaption的代码移到onload回调里，确保宽高信息已经就绪
• 不管是按钮上传还是拖拽上传的图片，都会经过这个逻辑，因此两者都能正确获取宽高

完整的修改后代码如下：

let uploadButton = document.getElementById("upload-button");
let chosenImage = document.getElementById("chosen-image");
let fileName = document.getElementById("file-name");
let container = document.querySelector(".container");
let error = document.getElementById("error");
let imageDisplay = document.getElementById("image-display");

const fileHandler = (file, name, type) => {
  if (type.split("/")[0] !== "image") {
    error.innerText = "Please upload an image file";
    return false;
  }
    
  error.innerText = "";
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = () => {
    let imageContainer = document.createElement("figure");
    let img = document.createElement("img");
      
    img.src = reader.result;
    // 图片加载完成后获取宽高
    img.onload = () => {
      const imgWidth = img.width;
      const imgHeight = img.height;
      // 可以在这里使用宽高做任何你需要的操作
      imageContainer.innerHTML += `<figcaption>${name} - 尺寸：${imgWidth}px × ${imgHeight}px</figcaption>`;
    };
    imageContainer.appendChild(img);
    imageDisplay.appendChild(imageContainer);
  };
};

//Upload Button
uploadButton.addEventListener("change", () => {
  imageDisplay.innerHTML = "";
  Array.from(uploadButton.files).forEach((file) => {
    fileHandler(file, file.name, file.type);
  });
});

container.addEventListener(
  "dragenter",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    container.classList.add("active");
  },
  false
);

container.addEventListener(
  "dragleave",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    container.classList.remove("active");
  },
  false
);

container.addEventListener(
  "dragover",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    container.classList.add("active");
  },
  false
);

container.addEventListener(
  "drop",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    container.classList.remove("active");
    let draggedData = e.dataTransfer;
    let files = draggedData.files;
    imageDisplay.innerHTML = "";
    Array.from(files).forEach((file) => {
      fileHandler(file, file.name, file.type);
    });
  },
  false
);

window.onload = () => {
  error.innerText = "";
};

这样修改后，无论是按钮上传还是拖拽上传的图片，都能在加载完成后准确获取宽高信息。

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