파일 업로드에 AJAX 및 FormData를 사용하는 방법은 무엇입니까?

FormData를 사용한 AJAX 파일 업로드

동적 HTML의 맥락에서 드래그 앤 드롭을 통해 파일 업로드 양식을 생성했습니다. AJAX를 사용하여 양식을 제출하기 위한 JavaScript 코드가 있습니다. 그러나 FormData를 사용하여 파일을 쉽게 업로드하려면 조정이 필요합니다.

준비

FormData를 활용하려면 다음 중 하나를 선택하세요.

• 전체 양식을 제공하세요. 처리:

var form = $('form')[0];
var formData = new FormData(form);

• FormData에 대한 정확한 데이터 지정:

var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
// Attach file
formData.append('image', $('input[type=file]')[0].files[0]);

양식 보내기

제공된 jQuery 사용 조각:

$.ajax({
    url: 'Your url here',
    data: formData,
    type: 'POST',
    contentType: false,
    processData: false,
    // ... Other options like success and etc
});

이 요청은 enctype="multipart/form-data"를 사용하여 일반 양식 제출을 모방하여 파일을 성공적으로 업로드할 수 있도록 합니다.

참고: 파일 업로드에는 POST가 필요하므로 옵션에 "POST" 유형을 지정해야 합니다. 요청.

업데이트: jQuery 1.6부터 contentType: false가 지원됩니다.

위 내용은 파일 업로드에 AJAX 및 FormData를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!