【问题标题】:How to get size(mb, kb, gb) of image url如何获取图片网址的大小(mb,kb,gb)
【发布时间】:2017-11-20 19:19:04
【问题描述】:

我在网上看到这个例子,但它得到了宽度和高度,我需要图像的重量。我该怎么办??

function getMeta(url){
$("<img/>",{
    load : function(){ alert(this.width+' '+this.height); },
    src  : url
});
}

【问题讨论】:

  • 图片与脚本是否在同一个域中?我问是因为您可以 ajax 文件并尝试查找内容长度标头...但是如果图像位于不同的域中,您可能会遇到跨域问题

标签: jquery image url


【解决方案1】:
window.URL    = window.URL || window.webkitURL;
var elBrowse  = document.getElementById("browse"),
    elPreview = document.getElementById("preview"),
    useBlob   = false && window.URL; // set to `true` to use Blob instead of Data-URL

function readImage (file) {
  var reader = new FileReader();

  reader.addEventListener("load", function () {
    var image  = new Image();

    image.addEventListener("load", function () {
      var imageInfo = file.name +' '+
          image.width +'×'+
          image.height +' '+
          file.type +' '+
          Math.round(file.size/1024) +'KB';

      // Show image and info
      elPreview.appendChild( this );
      elPreview.insertAdjacentHTML("beforeend", imageInfo +'<br>');

      if (useBlob) {
        // Free some memory
        window.URL.revokeObjectURL(image.src);
      }
    });
    image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;
  });

  reader.readAsDataURL(file);  
}


elBrowse.addEventListener("change", function() {

  var files = this.files, errors = "";

  if (!files) {
    errors += "File upload not supported by your browser.";
  }

  if (files && files[0]) {

    for(var i=0; i<files.length; i++) {
      var file = files[i];

      if ( (/\.(png|jpeg|jpg|gif)$/i).test(file.name) ) {
        readImage( file ); 
      } else {
        errors += file.name +" Unsupported Image extension\n";  
      }

    }
  }

  // Handle errors
  if (errors) {
    alert(errors); 
  }

});

HTML 文件

#preview img{height:100px;}
<input id="browse" type="file"  multiple />
<div id="preview"></div>

有关更多详细信息,您可以参考以下链接中的类似问题 link

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-12-27
    • 2014-08-28
    • 1970-01-01
    • 2023-02-13
    • 1970-01-01
    • 2010-09-28
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多