HTML5로 파일을 업로드하는 동안 간단한 GIF 표시

Question

HTML5를 사용하여 파일을 업로드하면 파일이 업로드되고 있는지 확인할 수 있습니까? 결국 나는 진도 표시 줄과 같은 단순한 gif를 보여주고 싶지만 어떤 카운터/수학이 까다로운 것이 없으므로 이와 같은 간단한 gif가 있습니다.

http://jsfiddle.net/DFT78/

그리고 파일이 업로드되었을 때 나는이 다시 숨길. 내가 알고 싶습니다. 파일을 업로드하는 경우 어떻게 확인합니까?

코드 (HTML5ROCKS)

<style> 
    .thumb { 
    height: 75px; 
    border: 1px solid #000; 
    margin: 10px 5px 0 0; 
    } 
</style> 

<input type="file" id="files" name="files[]" multiple /> 
<output id="list"></output> 

<script> 
    function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object 

    // Loop through the FileList and render image files as thumbnails. 
    for (var i = 0, f; f = files[i]; i++) { 

     // Only process image files. 
     if (!f.type.match('image.*')) { 
     continue; 
     } 

     var reader = new FileReader(); 

     // Closure to capture the file information. 
     reader.onload = (function(theFile) { 
     return function(e) { 
      // Render thumbnail. 
      var span = document.createElement('span'); 
      span.innerHTML = ['<img class="thumb" src="', e.target.result, 
          '" title="', escape(theFile.name), '"/>'].join(''); 
      document.getElementById('list').insertBefore(span, null); 
     }; 
     })(f); 

     // Read in the image file as a data URL. 
     reader.readAsDataURL(f); 
    } 
    } 

    document.getElementById('files').addEventListener('change', handleFileSelect, false); 
</script> 

Answer 1

나는이 작업을 수행하기 위해 "올바른"방법에 대해 확실하지 않다. 하지만 업로드 페이지에 Iframe을 사용하면 업로드가 진행되는 동안 GIF를 배치 할 수 있습니다.