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”）加载图像并获取具有Image功能的大小。

但问题是该值是假的路径，如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);
}

Answer 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>

Answer 3

可能这可以帮到你

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);
/*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 + ')';        
}

}

如何获取<input />

3 个答案: