웹 서버가 업로드 진행률 표시 줄을 만드는 데 도움이되어야하는 이유에 대해 합리적인 설명을 제공 할 수 있습니까?

Question

나는 작은 개인 웹 사이트를 레일에 집어 넣었고 파일을 업로드 할 수 있어야합니다. 이것은 거의 사소한 작업이며 시간이 전혀 걸리지 않았습니다.

시간이 오래 걸리며 서서히 마구 먹을 때가 있습니다. 사용자에게 업로드 진행률 표시 줄을 제공하는 작업입니다. 지금 적어도 십여 가지 솔루션을 보았습니다. 모두 공통점이 하나 있습니다. 웹 서버에 모듈을 설치해야합니다.

내 서버를 제어 할 권한이 없다는 점을 감안할 때 호스팅 회사에서 그러한 동물을 설치하려고 시도하지는 않을 것 같아서 저는 약간 구속력이 있습니다. 무엇이이 과정에서 서버를 어떤 식 으로든, 모양 또는 형태로 포함시키는 것이 절대적으로 불필요하다는 점에서 이것이 정말 실망 스럽습니다.

생각해보기 : 브라우저가 원격 서버에 소켓을 열고 데이터를 보내기 시작합니다. 브라우저는 전송할 바이트 수를 정확하게 알고 있으며 TCP 승인의 마법 덕분에 서버 측에 얼마나 많은 바이트가 도착했는지 알 수 있습니다. 그렇다면 플라잉 스파게티 몬스터의 이름에서 왜이 데이터를 자바 스크립트에 표시 할 수있는 간단한 방법이 없는가?

Answer 1

전적으로 동의합니다. 불행히도 브라우저간에 표준 API는 없습니다. 그러나 그것이 존재하더라도, 서버는 참여할 필요가 있습니다. 전송 한 데이터의 양을 신뢰할 수 없으며 HTTP는 확인을 필요로합니다. 따라서 데이터 그램 # 526이 수신되는지 여부를 알려주는 서버가 필요합니다. API를이 있다면 그것은 좋은 생각이 될 수 있지만 정말 같은 일이 :

가

확인 www.faqs.org/rfcs/rfc1867.html이

서버를 ping 할 수 있다면, 당신은 시뮬레이션 수있는 S 그것은 (신뢰 없음으로).

Answer 2

여기서 진정한 한계는 HTML 양식입니다. 그들은 더 큰 파일의 업로드가 완전히 불가능한 것처럼 보였던 10 년 전에 발명되었습니다. 따라서 전체 업로드가 완료되면 (ACTION 매개 변수) 하나의 콜백 만 제공합니다.

다행히도 진행률 막대를 제공하는 무료 플래시 기반 업 로더가 있습니다. 걱정하지 마세요. 대부분은 정상적으로 성능이 저하됩니다 (사용자가 플래시가없는 경우 간단한 파일 업로드 필드 제공). 모든 옵션은 Javascript를 통해 제어 할 수 있습니다. 또한 특별한 서버 측 인프라가 필요하지 않습니다.

확인 swfupload.org

Answer 3

그것은 IE (모든 버전)을 제외하고 지금은 대부분 모든 웹 브라우저를 통해 가능하다.

자바 스크립트는 매우 간단합니다. sourceforge.net에서 webfolder 프로젝트를 확인하십시오. HTML5를 지원하는 모든 브라우저에서 업로드 %를 표시합니다.

function upload() { 
    document.folder.encoding = "multipart/form-data"; 
    if (document.folder.file.files) { 
     var xhr = new XMLHttpRequest(); 
     var fd = new FormData(document.folder); 
     /* event listeners */ 
     xhr.upload.addEventListener("progress", uploadProgress, false); 
     xhr.addEventListener("load", uploadComplete, false); // loadend if doesn't matter success or not 
     xhr.addEventListener("error", uploadError, false); 
     xhr.open("POST", document.folder.action, true); 
     fd.append('submit', 'Upload'); // keep consistent with view, so maybe return method in view 
     fd.append('background', '1'); 
     xhr.send(fd); 
     return false; 
    } 
    return true; 
} 


function uploadProgress(evt) { 
    if (evt.lengthComputable) { 
     var per = (evt.loaded*100/evt.total).toFixed(0)+'%'; 
     getElement('_progress').innerHTML = per; 
     document.title = 'Upload ('+per+')'; 
    } else { 
     getElement('_progress').innerHTML = evt.loaded; 
    } 
} 

function uploadComplete(evt) { 
    getElement('_progress').innerHTML = '100%'; 
    window.location.reload(); 
} 

function uploadError(evt) { 
    getElement('_progress').innerHTML = 'error'; 
} 

나는 재미있는 능력을 가진 사이트에 진행률 막대를 표시하는 코드도 있습니다.