jQuery를 사용하여 FormData로 파일 업로드를 처리하려면 어떻게 해야 합니까?

jQuery 직렬화를 사용한 파일 업로드

jQuery의 serialize() 함수를 사용하여 파일 업로드 필드가 있는 양식을 제출할 때 파일 데이터를 검색할 수 있습니다. 도전적이다. 다른 양식 요소와 달리 파일 입력은 문자열로 직렬화될 수 없습니다.

이 제한을 우회하려면 FormData 개체를 활용할 수 있습니다. FormData는 파일을 포함한 양식 데이터를 제출에 더 적합한 형식으로 인코딩하는 방법을 제공합니다.

다음은 FormData를 사용하여 파일 업로드를 처리하는 방법을 보여주는 코드 조각입니다.

$(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를 false로 설정하고 contentType을 false로 설정하면 jQuery는 데이터 직렬화를 시도하지 않으므로 브라우저가 파일 업로드를 올바르게 처리할 수 있습니다.

서버 측에서는 다음을 통해 파일 데이터에 액세스할 수 있습니다. $_FILES 슈퍼글로벌 배열은 기존 파일 업로드 시나리오와 같습니다.

위 내용은 jQuery를 사용하여 FormData로 파일 업로드를 처리하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!