जे एस - फ़ाइल रीडर एपीआई छवि फ़ाइल का आकार मिलता है और आयाम

Question

हाय मैं फ़ाइल रीडर एपीआई का उपयोग कर अपलोड छवि प्राप्त करने के लिए निम्न कोड का उपयोग कर रहा:

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

यह बहुत अच्छा काम करता है और इसके बारे में base64 डेटा रिटर्न छवि।

अब मैं छवि फ़ाइल आकार और छवि चौड़ाई और ऊंचाई भी प्राप्त करना चाहता हूं।

क्या यह संभव है?

मैंने फ़ाइल को कंसोल में लॉग इन करने का प्रयास किया लेकिन मुझे वह नहीं मिला जो मैं खोज रहा हूं।

किसी भी मदद की सराहना की बहुत बहुत धन्यवाद!

Answer 1

ऐसा कुछ?

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

अद्यतन लाइव फिडल के साथ बदल दिया संस्करण है, तथापि, क्रॉस साइट स्क्रिप्टिंग चिंताओं की वजह से, आकार अब प्रभावी रूप से लिया गया जा रहा है।

Answer 2

मुझे विश्वास नहीं है कि जेएस उस डेटा को पहली बार व्यूपोर्ट में छवि प्रस्तुत किए बिना प्राप्त करने में सक्षम होने जा रहा है। ऐसा कहने के लिए, मैं किसी भी विधि से अपरिचित हूं जो आप जावास्क्रिप्ट, या JQuery पुस्तकालयों में जो भी पूछेंगे। इस तरह के डेटा प्राप्त करने के लिए आपकी सबसे अच्छी शर्त पृष्ठ पर छवि को पूर्वावलोकन क्षमता में प्रतिपादित करने जा रही है या PHP जैसी अधिक शक्तिशाली भाषा का उपयोग करके और जिस डेटा को आप ढूंढ रहे हैं उसे प्राप्त करने के लिए अजाक्स अनुरोध का उपयोग कर रहे हैं।