如何获取<input>上传的图片大小答案

【问题标题】：How to get the size of the image which is uploaded by <input>如何获取<input>上传的图片大小
【发布时间】：2016-11-29 03:49:03
【问题描述】：

    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") 加载图像并使用 Image 函数获取大小。

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

我敢打赌，这项工作可以在本地完成，但我不知道该怎么做。

有什么好主意吗？

【问题讨论】：

大小合适是什么意思，你说的是图片尺寸还是图片文件大小？
file.size 获取文件的大小。
与stackoverflow.com/questions/7497404/…stackoverflow.com/questions/3717793/…重复
我的意思是图像尺寸，宽度和高度。
你应该使用URL.createObjectURL(file)而不是使用FileReader

标签： javascript html css

【解决方案1】：

这是您检索图像尺寸的方法，将它们添加到您的 loadFinished() 函数中

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

【讨论】：

感谢您的回答。我已经尝试过像你这样的代码。问题是我无法从“输入”中获取路径或 url。
我认为你的新代码应该可以工作。我会试试看。谢谢
据我所知，Javascript 不允许您访问上传文件的路径。只能访问文件名，不能访问完整路径
我得到了两个“0”... 图像似乎没有立即准备好。然后我尝试了 image.onload=function(){console.log(image.naturalWidth, image.naturalHeight);};没有打印任何内容。
很高兴我能帮上忙

【解决方案2】：

试一试

 function imgSize(){
        var myImg = document.querySelector("#sky");
        var realWidth = myImg.naturalWidth;
        var realHeight = myImg.naturalHeight;
        alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
    }

 <img src="http://files.codepedia.info/uploads/2015/08/getFileName_size.jpg" id="sky" width="250" alt="Cloudy Sky" contextmenu="skymenu">
    <p><button type="button" onclick="imgSize();">Get Original Image Size</button></p>

【讨论】：

如果我使用你的代码。我必须先上传图片，然后获取图片的 url 或路径并将其设置为“img.src”。它应该有点多余，我必须将它上传到服务器并从服务器下载它。我认为可以在本地完成。如果我认为错了，请纠正我。

【解决方案3】：

也许这对你有帮助

函数 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);
/*Code here to show width on console*/
console.log($(element).width());    

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

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

}

【讨论】：