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

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

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

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

파일 목록 가져오기

위의 에는 선택한 파일이 포함된 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가 필요하지 않습니다.