JS - File Reader API Bilddateigröße und Abmessungen

Question

Hallo bekommen, ich bin mit dem folgenden Code das Upload-Bild unter Verwendung von File Reader API zu erhalten:

<script type="text/javascript"> 
var loadImageFile = (function() { 
    if (window.FileReader) { 
     var oPreviewImg = null, oFReader = new window.FileReader(), 
      rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; 

     oFReader.onload = function (oFREvent) { 

      /*get image*/ 
      var _img = oFREvent.target.result; 
      console.log(oFREvent.target); 
      /*add img to hidden input text*/ 
      localStorage.photo = _img; 
      oPreviewImg.src = oFREvent.target.result; 
     }; 

     return function() { 
      var aFiles = document.getElementById("imageInput").files; 
      if (aFiles.length === 0) { return; } 
      if (!rFilter.test(aFiles[0].type)) { 
       notify("You must select a valid image file!",3400,false); return; 
      } 
      oFReader.readAsDataURL(aFiles[0]); 
     } 

    } 

})(); 
</script> 

<form name="uploadForm"> 
<p><input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br /> 
<input type="submit" value="Send" /></p> 
<input type="hidden" id="photo_1_hidden" name="photo_1"/> 
</form> 

es funktioniert super und es gibt die Base64-Daten von der Bild.

jetzt möchte ich auch die Bilddateigröße und die Bildbreite und -höhe bekommen.

Ist es möglich?

Ich versuchte, die Konsole einzuloggen, aber ich kann nicht finden, wonach ich suche.

Jede Hilfe geschätzt Vielen Dank!

Answer 1

So ähnlich?

var oPreviewImg = new Image(); 
oPreviewImg.onload = function(){ 
    console.log(this.size); 
    alert("'" + this.name + "' is " + this.width + " by " + this.height + " pixels in size."); 
    return true; 
}; 

oPreviewImg.onerror = function(){ 
    alert("'" + this.name + "' failed to load."); 
    return true; 
} 

oPreviewImg.src = "//placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"; 

var xhr = new XMLHttpRequest(); 
xhr.open('HEAD', oPreviewImg.src, true); 
xhr.onreadystatechange = function() { 
    console.log('this', this); 
    if (xhr.readyState == 4) { 
    if (xhr.status == 200) { 
     alert('Size in bytes: ' + xhr.getResponseHeader('Content-Length')); 
    } else { 
     alert('ERROR'); 
    } 
    } 
}; 
xhr.send(null); 

Live version

aktualisieren Live-Version mit Fiddle ersetzt jedoch aufgrund Cross-Site-Scripting betrifft, ist die Größe nicht mehr effektiv abgerufen werden.

Answer 2

Ich glaube nicht, dass JS in der Lage sein wird, diese Daten zu erhalten, ohne zuerst das Bild in das Ansichtsfenster zu rendern. Das heißt, ich bin nicht vertraut mit irgendeiner Methode, die das tun würde, was Sie in den JavaScript- oder JQuery-Bibliotheken fragen. Die beste Option, um solche Daten zu erhalten, besteht darin, das Bild in einer Vorschau auf die Seite zu rendern oder eine leistungsfähigere Sprache wie PHP zu verwenden und eine Ajax-Anfrage zu verwenden, um die gesuchten Daten zu erhalten.