jQuery AJAX를 사용하여 파일 입력이 포함된 양식을 성공적으로 제출하는 방법은 무엇입니까?

jQuery 직렬화로 파일 업로드를 처리하는 방법

파일 입력 필드가 포함된 양식으로 작업할 때 AJAX 제출을 위한 jQuery의 직렬화 기능을 사용하면 도전을 제시합니다. 기존 직렬화 방법은 파일 입력을 효과적으로 처리하지 못하여 $_FILES 데이터가 비어 있게 됩니다.

해결책: FormData 개체

이러한 제한을 극복하려면 FormData 개체를 활용하세요. FormData를 사용하면 파일 입력을 포함한 모든 양식 데이터를 캡처하고 직렬화할 수 있습니다. FormData를 활용하면 AJAX 요청에 파일을 원활하게 전달할 수 있습니다.

코드 예:

$(document).on("submit", "form", function(event) {
    event.preventDefault();
    $.ajax({
        url: $(this).attr("action"),
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status) {

        },
        error: function (xhr, desc, err) {

        }
    });        

});

이 예에서는 양식에서 FormData 객체를 생성합니다. processData 및 contentType 옵션을 false로 설정합니다. 이러한 옵션은 jQuery가 자동으로 데이터를 변환하고 콘텐츠 유형을 설정하는 것을 방지하여 FormData가 파일 업로드 프로세스를 처리할 수 있도록 합니다.

위 내용은 jQuery AJAX를 사용하여 파일 입력이 포함된 양식을 성공적으로 제출하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!