Question

我看到此代码可以获取图片的大小(KB, MB)。但是这段代码在更改后从按钮获取数据。这段代码可以适用于我的问题吗？或者有没有其他方法可以使用javascript直接获取图像的大小？。

＆＃13;

$(function () {
   $("#btnClick").change(function (e){
      var a = e.target.files[0];
      alert(parseFloat(a.size / 1024).toFixed(2) + " KB.");
   });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id ="btnClick"/>

＆＃13;

修改正如nnnnn所说。我有IMG (eg. < img src="someimg.jpg">)我希望得到这张照片的大小。我怎么得到它？如上面的例子，它将大小存储在按钮中并检索它。

Answer 1

<img>元素无法直接获取有关其已加载数据的任何信息，除了获取其naturalWidth和naturalHeight值，当然，如果它是浏览器支持的有效图像类型之一。

唯一的方法是再次获取数据，作为Blob。从那里，您将能够看到文件的大小。但请注意，此方法受Same-Origin政策的限制。

＆＃13;

img.onload = e => {
  fetch(img.src).then(resp => resp.blob())
  .then(blob => {
    console.log(blob.size);
    });
  };

＆＃13;

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/John_William_Waterhouse_A_Mermaid.jpg/800px-John_William_Waterhouse_A_Mermaid.jpg" id="img">

＆＃13;

Answer 2

您可以使用此函数通过传递url来获取任何文件的文件大小：

function get_filesize(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open("HEAD", url, true); // Notice "HEAD" instead of "GET",
                             //  to get only the header
    xhr.onreadystatechange = function() {
    if (this.readyState == this.DONE) {
        callback(parseInt(xhr.getResponseHeader("Content-Length")));
    }
};
    xhr.send();
}

并像这样使用：

get_filesize("https://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg", function(size) {
     alert("The size of image is: " + size + " bytes.");
});

在这里试试： https://jsfiddle.net/emilvr/mv5r6xxm/

如何在IMG html属性中获取图像的大小

2 个答案: