최신 브라우저에서 파일을 업로드하는 가장 좋은 방법은 무엇입니까?
(단일) 파일을 서버에 업로드하고 업로드 진행 상황을 보여주고 싶습니다.
HTTP POST를 사용하여 파일을 업로드 할 수 있다는 것을 알고 있습니다. 나는 웹 소켓에 익숙하지 않지만 내가 이해하는 바와 같이 바이너리 데이터도 그렇게 보낼 수 있으며 웹 소켓은 양방향이기 때문에 업로드 진행률을 얻을 수 있습니다.
나는 오래된 브라우저에 대해 걱정하지 않으므로 iframe과 플래시 솔루션은 그 경로로가는 데 큰 이점이 없다면 그다지 매력적이지 않습니다.
또한 최고의 서버 측 기술이 궁금합니다. Django와 같은 WSGI 서버를 사용하면 장점이 있습니까? 아니면 Node.js와 같은 비 차단 I / O 기술일까요? 웹 프레임 워크 x가 웹 프레임 워크 y보다 낫거나 서버 x가 서버 y보다 나은지 묻지 않습니다. 그러나 단순히 클라이언트에 업로드를 제공하기 위해 이상적인 기술이 가져야하는 것입니다.
업데이트 : 서버 측은 업로드를 용이하게하기 위해 클라이언트에서 사용 가능한 기술 / API와 관련이없는 것 같습니다.
수정 (2017-10-17) : 현재 Fetch API 를 사용하는 옵션도 있습니다 . 보다 현대적인 promise 기반 API 뒤에 XMLHttpRequest와 기본적으로 동일한 기능을 제공합니다. 기본적으로 지원하지 않는 브라우저를위한 폴리 필 이 있습니다 window.fetch()(현재 주로 Internet Explorer 및 이전 Safari 버전).
XMLHttpRequest 대 웹 소켓 대 다른 것
분명히 XMLHttpRequest . 최신 브라우저의 기능은 방대하며 거의 모든 시나리오를 포괄합니다. 표준 POST 또는 PUT 요청을 생성하고 모든 웹 서버 및 프레임 워크 조합이이를 처리 할 수 있습니다.
웹 소켓은 일부 시나리오에 적합하지만 많은 복잡성을 추가하는 다른 프로토콜입니다. 서버의 실시간 응답이 필요한 경우에만 사용할 가치가 있습니다. 그리고 당신이 언급했듯이 Flash와 같은 다른 접근 방식은 추악한 해킹 일뿐입니다.
바이너리 데이터 보내기
일반적으로 파일에 직접 액세스 할 수 없습니다. 따라서 <input type="file">페이지 어딘가에 양식 필드가 있고 사용자가 파일을 선택할 때까지 기다립니다. 옵션은 다음과 같습니다.
- 파일 내용 만 보내기 :
request.send(input.files[0]). 요청 본문은 파일의 내용이며 다른 것은 없으며 인코딩이 수행되지 않으며 파일 이름과 같은 메타 데이터도 전송되지 않습니다. 브라우저 호환성 : Chrome 7, Firefox 3.6, Opera 12, IE 10. - 전체 양식의 데이터 보내기 :
request.send(new FormData(input.form)). 여기서 양식 내용은로 인코딩됩니다multipart/form-data. 즉, 여러 양식 필드를 보낼 수 있으며 필드 및 파일 이름과 같은 메타 데이터도 전송됩니다. 보내기 전에 개체 를 수정할FormData수도 있습니다. 서버 측 프레임 워크에 따라이 요청을 처리하는 것이 원시 데이터보다 간단 할 수 있으며 일반적으로 사용할 수있는 도우미가 많이 있습니다. 브라우저 호환성 : Chrome 6, Firefox 4, Opera 12, IE 10. - 형식화 된 배열 보내기 : 파일이 없지만 생성 한 바이너리 데이터를 즉석에서 보내고 자하는 경우에 대비합니다. 여기에서는 추가 인코딩이 수행되지 않으므로 서버 측에 관한 한 이것은 파일 내용을 보내는 것과 같이 작동합니다. 브라우저 호환성 : Chrome 9, Firefox 9, Opera 11.60, IE 10.
업로드 진행률 표시
에서 progress이벤트를 수신 할XMLHttpRequest.upload 수 있습니다 . progress이벤트 가 loaded하고 total당신이 당신의 요청에있어 얼마나 멀리 결정 할 수 속성. 브라우저 호환성 : Chrome 7, Firefox 3.5, Opera 11.60, IE 10.
자바 스크립트 라이브러리
물론 여기에 설명 된 기능을 래핑하는 기존 라이브러리가 있습니다. 이것들은 다른 답변에서 언급되며 웹 검색은 확실히 더 많이 나타날 것입니다. 여기에 어떤 라이브러리도 제안하고 싶지 않습니다. 어떤 라이브러리를 사용해야하는지는 순전히 선호하는 것입니다.
내 대답은 꽤 늦었지만 여기에 있습니다.
짧은 답변:
XMLHttpRequest 는 최신 브라우저에서 파일을 업로드하는 가장 좋은 방법입니다.
XMLHttpRequest 란 무엇입니까?
XMLHttpRequest는 Microsoft에서 설계하고 Mozilla, Apple 및 Google에서 채택한 JavaScript 개체입니다. 현재 W3C에서 표준화 되고 있습니다 . 전체 페이지를 새로 고칠 필요없이 URL에서 데이터를 쉽게 검색 할 수있는 방법을 제공합니다. 웹 페이지는 사용자의 작업을 방해하지 않고 페이지의 일부만 업데이트 할 수 있습니다. XMLHttpRequest는 AJAX 프로그래밍 에서 많이 사용됩니다 .
이름에도 불구하고 XMLHttpRequest는 XML뿐만 아니라 모든 유형의 데이터 를 검색 하는 데 사용할 수 있으며 HTTP ( file 및 ftp 포함) 이외의 프로토콜을 지원합니다 .
이 XMLHttpRequest개체는 Html5 사양 에서 외관을 변경했습니다 . 특히 XMLHttpRequest 레벨 2 입니다.
장점 :
- 업로드 및 다운로드를위한 File , Blob 및 FormData 객체 와 같은 바이트 스트림 처리
- 업로드 및 다운로드 중 진행 이벤트
- 출처 간 요청
- 익명 요청 허용 -HTTP Referer를 보내지 않음
- 요청에 대한 시간 제한 을 설정하는 기능
- 백그라운드 에서 업로드 중입니다.
- 사용자가 있는 페이지는 그대로 유지됩니다.
- 서버 측을 변경할 필요가 없으므로 기존 서버 측 로직은 변경되지 않아야하므로이 기술을 훨씬 쉽게 적용 할 수 있습니다.
Html5 진행 이벤트 :
당으로 HTML5 인 진행 이벤트 사양 , HTML5의 진행 이벤트는, 다른 사람의 사이에서 다음과 같은 정보를 제공합니다
total - Total bytes being transferred
loaded - Bytes uploaded thus far
lengthComputable - Specifies if the total size of the data/file being uploaded is known
위의 정보를 사용하여 "남은 시간"정보를 사용자에게 제공하는 것은 매우 쉽습니다.
사용자에게 계속 정보를 제공합니다.
사용자가 사용할 수있는 파일에 대한 정보 :
- 파일 이름
- 파일 크기
- Mime 유형
- 완료율이 표시된 진행률 표시 줄
- 업로드 속도 또는 업로드 대역폭
- 남은 대략적인 시간
- 지금까지 업로드 된 바이트
- 서버 측의 응답
XMLHttpRequest 데모를 사용한 파일 업로드
예를 들어 " 진행률 표시 데모와 함께 Html5를 사용하여 파일 업로드 "를 확인하십시오 . 필요한 모든 JavaScript 코드가 페이지에 있지만 CSS는 포함되어 있지 않습니다. 보안상의 이유로 파일 형식은 jpg, png, gif 및 txt로 제한됩니다. 최대 파일 크기는 2MB입니다.
XMLHttpRequest 브라우저 호환성 :
아마도 Javascript의 파일 API는 최신 브라우저에서 가장 좋은 방법 일 것입니다.
http://www.sitepoint.com/html5-javascript-file-upload-progress-bar/
서버 측에서 ... 주요 프레임 워크에 HTTP 파일 POST 기능이 잘 포함되어 있다고 생각합니다.
AJAX를 통해 파일을 업로드 할 수 있습니다.
Use the jQuery form plugin. It does all the dirty work of binding the files to the form and serializing it. It is also capable of showing upload progress.
Server stack hasn't got much to do with it.
I personally like blueimp jQuery File Upload Plugin (https://blueimp.github.io/jQuery-File-Upload/)
File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.
Demos:
Download (GitHub): https://github.com/blueimp/jQuery-File-Upload
'programing' 카테고리의 다른 글
| Google 스프레드 시트의 데이터를 사용하여 Google 양식을 '미리 채울'수 있습니까? (0) | 2020.11.28 |
|---|---|
| git은 내 .sql 파일이 바이너리 파일이라고 생각하는 이유는 무엇입니까? (0) | 2020.11.28 |
| Angular 2 구성 요소 속성의 기본값을 설정하는 방법은 무엇입니까? (0) | 2020.11.28 |
| 위젯을 만드는 함수와 클래스의 차이점은 무엇입니까? (0) | 2020.11.28 |
| Eclipse의 문제보기에 대한 모범 사례 (0) | 2020.11.27 |