JS - 파일 리더 API는 이미지 파일의 크기를 얻을 수 및 크기

안녕 내가 파일 리더 API를 사용하여 업로드 이미지를 얻기 위해 다음 코드를 사용하고 있습니다 :JS - 파일 리더 API는 이미지 파일의 크기를 얻을 수 및 크기

<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로 데이터를 반환 영상.

이제 이미지 파일 크기와 이미지 너비와 높이를 얻고 싶습니다.

가능합니까?

콘솔에 로그인하려고 시도했지만 찾으려는 항목을 찾을 수 없습니다.

도움이 되었으면 도움이 될 것입니다.

출처

2013-07-21 bombastic

이와 비슷한? 바이올린으로 대체

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

업데이트 라이브 버전은, 그러나, 크로스 사이트 스크립팅 문제로, 크기는 더 이상 효과적으로 검색되지되고있다.

출처

2013-07-21 15:45:56

그래, 파일 크기는 어떻습니까? – bombastic

크기를 추가 했으므로 죄송합니다. 크기가 마음에 들었습니다. 당신이 똑똑하다면 아마도 오직 하나의 요청 만 할 수있을 것입니다. –

URL에 라이브 버전이 있습니다. DNS에 문제가 있습니다. – LukyVj

이미지를 뷰포트에 먼저 렌더링하지 않으면 JS가 해당 데이터를 가져올 수 있다고 생각하지 않습니다. 즉, JavaScript 나 JQuery 라이브러리에서 요구하는 것을 수행하는 모든 메소드에 익숙하지 않다는 것입니다. 이와 같은 데이터를 얻는 가장 좋은 방법은 이미지를 미리보기 용량으로 페이지에 렌더링하거나 PHP와 같은보다 강력한 언어를 사용하고 찾고있는 데이터를 얻기 위해 Ajax 요청을 사용하는 것입니다.

출처

2013-07-21 15:48:43 Peter

JS - 파일 리더 API는 이미지 파일의 크기를 얻을 수 및 크기

답변

관련 문제