JavaScript를 사용하여 이미지의 크기가 얼마나로드되었는지 확인할 수 있습니까?

Question

그것은 완전히 바보 같은 질문입니다. 그러나 나는 의심의 여지를 피고 싶었다. 이미지가로드되면 onload 또는 oncomplete 이벤트를 사용하여로드 상태를 확인할 수 있습니다. 하지만 JavaScript를 사용하여 얼마나 많은 이미지가로드되었는지 알고 싶었습니다. 그것은 정말로 가능합니까?

내 질문은 URL에서 이미지 크기를 얻을 수 있습니까? 그리고 어떤 간격으로 이미지의 많은 부분이로드되는지 알 수 있습니까?

Answer 1

XMLHttpRequest object을 통해 이미지를로드하는 경우 bind to the progress event을 입력하고 함수 인수 "이벤트"속성 "로드 됨"및 "합계"를 확인할 수 있습니다. 늘 그렇듯이 다양한 브라우저 간의 지원은 놀랄 수 있습니다. linked MDN article에서

:

var req = new XMLHttpRequest(); 
req.addEventListener("progress", onProgress, false); 
req.open(); 

function onProgress(ev) { 
    if (evt.lengthComputable) { 
    var percentComplete = evt.loaded/evt.total; 
    // ... 
    } else { 
    // Unable to compute progress information since the total size is unknown. 
    } 
} 

[업데이트] BERGI의 질문 @ 주석 당 당신이 완전히 당신이 새로운 이미지 요소를 추가 할 수 있습니다 다운로드 한 후에는 DOM에 이미지를 추가하려면 :

1. XHR을 통해 가져온 URL과 동일한 "src"속성 (브라우저 캐시가 중복 다운로드를 방지하기를 바랍니다).

2. "src"속성을 data URI of the Base64 encoded image content으로 설정하고 브라우저 캐시에 대해 걱정하지 마십시오.

var img = new Image(); // or document.createElement('img'); 
img.src = ... // URL from the above XHR request, or 
img.src = 'data:image/png;base64,' + base64(xhrContent); 
document.body.appendChild(img); 

Answer 2

당신은 파일 이름, 파일 크기, MIME 형식을 읽을 수 있습니다 현대적인 브라우저의 html5 file api에이를 수 있고, 파일 핸들에 대한 참조 -이 example