javascript - 如何获取<input>上传的图片大小

Question

    function changeFile() {
      var preview = document.getElementById("previewDiv");
      preview.style.backgroundImage = "";

      var element = document.getElementById("ads_files");
      var files = element.files;

      var file = files[0];

      console.log(file);

      var reader = new FileReader();
      reader.onload = loadFinished;
      reader.readAsDataURL(file);

      function loadFinished(event) {
        var data = event.target.result;
        preview.style.backgroundImage = 'url(' + data + ')';
      }
    }

#previewDiv {
  border: 2px solid rgb(204, 204, 204);
  width: 250px;
  height: 200px;
  background-size: 100% 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="ads_files" name="file" onchange=changeFile() />

<div id="previewDiv">
</div>

上面的代码是上传一张图片作为div的背景展示。效果很好。

现在我想上传适当宽度和高度的图片。所以我需要获取上传图片的大小(其他图片不会上传到服务器)。

我在互联网上搜索了一些解决方案。好像是 document.getElementById("ads_files").value 获取图片上传后的文件路径。然后使用 Image.src=document.getElementById("ads_files") 加载图像并获取图像的大小。

但问题是，该值是一个假路径，如 c:\fakepath\10256530_503531203106865_63236440322903725_n.jpg(我使用的是 Mac!!!!)。当然这个程序是行不通的。

我敢打赌这项工作可以在本地完成，但我不知道如何去做。

有什么好主意吗？

Answer 1

以下是检索图像尺寸的方法，将这些添加到 loadFinished() 函数

var image = new Image();
image.src = data;
image.onload = function() {
    console.log(image.naturalWidth, image.naturalHeight);
}