Ajax를 사용하여 데이터와 파일을 동시에 업로드하려면 어떻게 해야 합니까?

Ajax를 사용하여 데이터와 파일을 동시에 업로드

양식 제출에 Ajax를 사용하면 원활한 사용자 환경을 제공하지만 두 가지를 모두 업로드하려고 하면 문제가 발생합니다. 데이터와 파일을 동시에. 이 문서에서는 파일 업로드와 데이터 수집 방법을 결합하여 성공적인 다중 필드 제출을 달성하는 방법을 시연하면서 이 문제를 다룹니다.

문제 이해

질의는 다음과 같습니다. jQuery와 Ajax를 사용하여 데이터와 파일을 제출하는 데 사용되는 다양한 전략에서 비롯됩니다. .serialize()를 사용하여 데이터를 수집하는 동안 파일은 new FormData($(this)[0])를 활용합니다. 이러한 기술을 병합하면 데이터와 파일을 동시에 전송할 수 있습니다.

해결책

해결책은 jQuery 식별자를 올바르게 사용하는 데 있습니다. 초기 대응 대신 새로운 FormData(this)를 사용하면 데이터와 파일을 모두 FormData 객체로 캡슐화할 수 있습니다. 그런 다음 이 객체는 Ajax 요청의 데이터 매개변수 역할을 합니다.

예제 코드

다음 코드 조각은 두 방법의 통합을 보여줍니다.

$("form#data").submit(function(e) {
    e.preventDefault();

    var formData = new FormData(this);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data);
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

구현 세부 정보

제공된 코드에서 Ajax 요청은 양식 제출 시 시작되며 FormData 개체를 활용하여 모든 양식 필드와 파일을 캡슐화합니다. 기본 FormData가 수정되지 않은 상태로 유지되도록 contentType 및 processData 옵션이 비활성화됩니다. 성공 콜백은 서버에서 받은 응답을 처리합니다.

간단한 버전

간결하게 하기 위해 다음 코드는 솔루션의 단순화된 버전을 제공합니다.

$("form#data").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);

    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
});

위 내용은 Ajax를 사용하여 데이터와 파일을 동시에 업로드하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!