Ajax를 사용하여 데이터와 파일을 동시에 업로드하는 방법은 무엇입니까?

Question

jQuery와 Ajax를 사용하여 데이터와 파일을 제출하고 있는데 데이터와 파일을 모두 하나의 형식으로 보내는 방법을 잘 모르겠습니다.

현재 두 가지 방법을 거의 동일한 방식으로 사용하고 있지만 데이터를 배열로 수집하는 방식이 다릅니다. 데이터는 .serialize();를 사용하고 파일은 ;= new FormData($(this)[0]);

이 두 가지 방법을 결합하여 Ajax를 통해 파일과 데이터를 하나의 형식으로 업로드할 수 있습니까?

데이터 jQuery, Ajax 및 html

$("form#data").submit(function(){

    var formData = $(this).serialize();

    $.아약스({
        URL: window.location.pathname,
        유형: '포스트',
        데이터: 양식데이터,
        비동기: 거짓,
        성공: 함수(데이터) {
            경고(데이터)
        },
        캐시: 거짓,
        콘텐츠 유형: 거짓,
        프로세스 데이터: 거짓
    });

    거짓을 반환;
});


    
    
    
    <버튼>제출

문서 jQuery, Ajax 및 html
$("form#files").submit(function(){

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

    $.아약스({
        URL: window.location.pathname,
        유형: '포스트',
        데이터: 양식데이터,
        비동기: 거짓,
        성공: 함수(데이터) {
            경고(데이터)
        },
        캐시: 거짓,
        콘텐츠 유형: 거짓,
        프로세스 데이터: 거짓
    });

    거짓을 반환;
});


    <입력 이름="이미지" 유형="파일" />
    <버튼>제출

Ajax를 통해 데이터와 파일을 하나의 형식으로 보낼 수 있도록 위의 내용을 어떻게 결합합니까? 
제 목표는 Ajax를 통해 이 모든 양식을 함께 보내는 것입니다. 이것이 가능합니까?

    
    
    
    <입력 이름="이미지" 유형="파일" />
    <버튼>提交


            

Answer 1

또 다른 옵션은 iframe을 사용하고 양식의 대상을 iframe으로 설정하는 것입니다.

다음을 시도해 볼 수 있습니다(jQuery를 사용함):

으아악

모든 브라우저에서 작동하며 데이터를 직렬화하거나 준비할 필요가 없습니다. 한 가지 단점은 진행 상황을 모니터링할 수 없다는 것입니다.

또한 적어도 Chrome의 경우 요청은 개발자 도구의 "xhr" 탭 아래에 표시되지 않고 "doc" 아래에 표시됩니다.

Answer 2

제 문제는 잘못된 jQuery 식별자를 사용하는 것이었습니다.

양식을 사용하여 ajax를 사용하여 데이터와 파일을 업로드할 수 있습니다.

PHP + HTML

으아악

jQuery + Ajax

으아악

단순화된 버전

으아악