2

I see this example in the web, but it get width and height, I need weight of the image. how can I do it ??

function getMeta(url){
$("<img/>",{
    load : function(){ alert(this.width+' '+this.height); },
    src  : url
});
}
  • 1
    Will the images be on the same domain as the script? I ask because you could ajax the file and attempt to find the content-length header... but if the images are on a different domain you may run into cross domain issues – Dale Jun 18 '17 at 14:18

1 Answers1

0
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 File

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

for more detail you can refer to similar question at below link link

Ratan Uday Kumar
  • 5,738
  • 6
  • 35
  • 54