javascript에서 멋지고 단순한 파일 업로드하는 방법?

Question

내가 원하는 건이다 (간단하지가 아닌 경우)

• 는
• 는 클라이언트 측에서 서버 측
• 트리거 동작을/성공 확인에 실패 파일을
• 작은 진행률 표시 줄을 선택합니다. 이 제외

를 다시로드 페이지없이

모든 것을, 더 간단한.

스 니펫이 가장 환영받을 것입니다.

Answer 1

주위에는 많은 스크립트와 튜토리얼이 있습니다. 예를 들어 확인하십시오 http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html

Answer 2

<input type='file'/> 태그가 포함 된 양식의 본문을 가져 와서 제출할 수 없기 때문에 분명히 생각한 것처럼 평범하지는 않습니다.

<iframe/>의 대상으로 양식을 제출 한 다음 상태 업데이트를 위해 서버를 XMLHttpRequest 개체로 폴링 할 수 있지만 업로드를 처리하는 서버 측 스크립트는 비동기 적으로 수행해야합니다 그렇지 않으면 파일이 완전히 업로드되고 상태 진행 상태 업데이트가 아닌 상태 업데이트 만 받게됩니다. 지금까지는 대부분의 웹 프레임 워크에서 이것이 어려움이라고 생각합니다. 그러나 실제로 그걸 파고들 이유는 없었습니다. 그래도 재미있게 들립니다 ...

실제 양식과 상관없이 파일을 제출하려는 경우 동일한 작업을 수행하지만 진행 상태 업데이트에 대해 걱정할 필요가 없습니다.

당신이 할 수있는 일은 업로드가 완료되면 <input type='file'/>을 대체하는 것입니다. <input type='hidden'/>에는 최근 업로드 한 파일의 서버 측 ID가 포함되어 있습니다. 그렇게하면 사용자가 저장을 누르는시기, 실제로 저장할 파일을 알 수 있습니다.

숨겨진 파일은 확인란을 선택하여 저장할 수 있습니다.이 확인란을 사용하면 파일 업로드를 취소 할 수 있습니다. 저장하기 전에 체크 박스를 선택 취소하면됩니다.

Answer 3

XMLHttpRequest 객체를 사용하는 파일 업로드는 모든 브라우저에서 가능하지 않으므로 (Firefox 및 Safari/Chrome 만 지원) 브라우저 간 구현의 경우 트릭을 사용하십시오.

실제 XHR 파일을 업로드하려면 Firefox 3에서 수행하는 방법에 대해 extended article을 작성했습니다. 실제로 JavaScript 문자열에서 실제 HTTP 요청을 작성해야하므로 매우 낮은 수준입니다.

Answer 4

GearsUploader이 적합합니다.