jQuery는 FormData를 사용하여 파일 업로드를 구현합니다.

머리말

더 나은 사용자 경험을 제공하기 위해 비동기 업로드용 jQuery를 소개합니다. 한편으로 JavaScript의 비동기 작업은 양식보다 더 유연합니다. 반면에 비동기 업로드는 대용량 파일을 업로드할 때 장기적인 페이지 정지를 방지합니다.

HTML

type=file의 d5fd7aea971a85678ba271703566ebfd을 사용하면 사용자가 파일을 탐색하고 선택할 수 있습니다. 일반적으로 입력 컨트롤은 ff9c23ada1bcecdd1a0fb5d5a0f18437에 배치됩니다. form:

<form>
 <input type="file" id="avatar" name="avatar">
 <button type="button">保存</button>
</form>

그런데 왜 파일을 하나만 선택할 수 있나요? ? 다중 선택을 활성화하려면 d5fd7aea971a85678ba271703566ebfd에 다중 속성을 추가하세요!

<input type="file" id="avatar" name="avatar" multiple>

파일 목록 가져오기

위의 d5fd7aea971a85678ba271703566ebfd에는 선택한 파일이 포함된 files라는 DOM 속성이 있습니다. 목록(배열).

$('button').click(function(){
 var $input = $('#avatar');
 // 相当于： $input[0].files, $input.get(0).files
 var files = $input.prop('files');
 console.log(files);
});

이 배열의 각 항목은 다음과 같은 기본 속성을 갖는 File 객체입니다.

name: 파일 이름, 읽기 - 문자열만, 경로 정보를 포함하지 않습니다.

크기: 파일 크기, 단위는 바이트, 읽기 전용 64비트 정수

유형: MIME 유형 , 읽기 전용 문자열, 유형을 알 수 없는 경우 빈 문자열이 반환됩니다.

자세한 내용은 https://developer.mozilla.org/zh-CN/docs/를 참조하세요. Using_files_from_web_applications

multipart/form-data

파일 업로드는 바이너리 데이터이며 HTTP는 텍스트 기반 통신 프로토콜을 제공합니다. 이 경우 다중 부분/양식 데이터로 인코딩된 HTTP 양식이 필요합니다.

HTTP 메시지 본문 형식은 다음과 같습니다.

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="title"
 
harttle
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="avatar"; filename="harttle.png"
Content-Type: image/png
 
 ... content of harttle.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

각 필드는 경계 문자열로 구분되며 브라우저는 다음을 보장합니다. 경계 문자열은 콘텐츠를 복제하지 않으므로 multipart/form-data는 이진 데이터를 성공적으로 인코딩할 수 있습니다.

jQuery 업로드 파일

이진 파일의 다중 부분/양식 데이터 인코딩을 수행하는 데 도움이 될 수 있는 XMLHttpRequest 레벨 2에서 제공하는 FormData 개체입니다.

$('button').click(function(){
 var files = $('#avatar').prop('files');
 
 var data = new FormData();
 data.append('avatar', files[0]);
 
 $.ajax({
  url: '/api/upload',
  type: 'POST',
  data: data,
  cache: false,
  processData: false,
  contentType: false
 });
});

url, type, data는 프런트엔드 사람들에게 친숙해야 합니다. 나머지 세 가지 매개변수를 소개하겠습니다:

cache

캐시를 false로 설정할 수 있습니다. 이 URL(및 해당 HTTP 메서드)의 브라우저 캐시를 비활성화합니다. jQuery는 URL에 중복 매개변수를 추가하여 이를 수행합니다.

이 방법은 GET 및 HEAD에서만 작동합니다. 그러나 IE8은 POST 요청에 응답하기 위해 이전 GET 결과를 캐시합니다. 캐시 설정: false 여기서는 IE8과의 호환성을 위한 것입니다.

참조: http://api.jquery.com/jquery.ajax/

contentType

jQuery에서 content-type의 기본값은 application/ x- www-form-urlencoded이므로 data 매개변수에 전달된 객체는 기본적으로 쿼리 문자열로 변환됩니다(HTTP 양식 인코딩 enctype 참조).

이 변환을 수행하는 데 jQuery는 필요하지 않습니다. 그렇지 않으면 multipart/form-data의 인코딩 형식이 파괴됩니다. 따라서 jQuery의 변환 작업을 비활성화하려면 contentType: false를 설정하세요.

processData

jQuery는 데이터 객체를 문자열로 변환하여 HTTP 요청을 보냅니다. 기본적으로 변환에는 application/x-www-form-urlencoded 인코딩이 사용됩니다. contentType: false를 설정한 후에는 변환이 실패하므로 변환 프로세스를 비활성화하려면 processData: false를 설정하십시오.

제공하는 데이터는 FormData로 인코딩된 데이터이며, 문자열 변환을 위해 jQuery가 필요하지 않습니다.

즉, 하위 버전 브라우저의 경우 직접 양식 제출 양식만 사용할 수 있지만 대용량 파일 양식을 제출하는 페이지는 오랜 시간이 걸립니다. 낮은 버전의 브라우저를 사용하려면 브라우저에서 이 문제를 해결하려면 여러 파일 및 업로드 진행을 지원하는 많은 플래시 플러그인과 같은 다른 방법만 사용할 수 있습니다.