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

Ajax를 사용하여 데이터와 파일을 하나의 형식으로 업로드

하나의 Ajax 형식으로 데이터와 파일을 모두 업로드하는 것은 웹 애플리케이션의 일반적인 요구 사항입니다. 다음은 이 작업을 효과적으로 수행하는 방법에 대한 자세한 설명입니다.

문제

Ajax를 사용하여 데이터와 파일을 모두 제출하는 방법은 서로 다르기 때문에 까다로울 수 있습니다. jQuery에 의해 처리됩니다. $.serialize()가 데이터를 배열로 수집하는 동안 양식 파일에는 new FormData()를 사용해야 합니다.

메서드 결합

이러한 메소드를 병합하는 핵심 FormData 객체를 사용하고 있습니다. FormData는 양식 데이터 객체를 생성할 수 있는 내장 생성자입니다. 이 객체는 데이터와 파일을 모두 담을 수 있으므로 우리의 목적에 이상적입니다.

예

두 가지 방법을 결합하려면 다음 코드를 사용하세요.

$("form#datafiles").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
    });
});

이 경우 #datafiles 형식에는 일반 데이터 입력과 파일 입력이 모두 포함됩니다. new FormData(this) 줄은 양식의 데이터로 새 FormData 객체를 생성합니다.

PHP 스크립트

서버 측에 업로드된 데이터와 파일을 처리하려면, 다음과 같은 PHP 스크립트를 사용하세요.

<?php

print_r($_POST);
print_r($_FILES);

?>

이 코드를 사용하면 다음을 사용하여 양식 데이터와 업로드된 파일에 모두 액세스할 수 있습니다. $_POST 및 $_FILES 슈퍼 전역.

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