Ajax를 통해 파일 업로드 append()가 작동하지 않는 추가 데이터

Question

제출 된 양식의 숨겨진 입력 필드를 통해 양식 데이터를 FormData();으로 전달하는 Ajax 호출을 통해 파일을 외부 서버에 업로드하면 모든 것이 잘 동작합니다.

그러나 양식 데이터를 FormData();에 전달할 때 FormData();에 추가하면 작동하지 않습니다.

어떻게 데이터를 추가 할 때 숨겨진 필드를 통해 데이터를 전달할 때 데이터 처리가 어떻게 다른지 알 수 있습니다. 두 번째 경우에는 작동하지 않기 때문에.

이 방법은 작동합니다

$('#myform').on('submit', function(e){ 
    var formdata = new FormData(this); 
    $.ajax({ 
     url: 'https://external-website.com/', 
     type: 'POST', 
     data: formdata, 
     processData: false, 
     contentType: false 
    }); 
}); 

<form id="myform" method="post" enctype="multipart/form-data"> 
    <input type="hidden" name="key1" value="value1"> 
    <input type="hidden" name="key2" value="value2"> 
    <input type="file" name="file"> 
    <input type="submit" value="Upload"> 
</form> 

이 방법은 작동하지 않습니다

$('#myform').on('submit', function(e){ 
    var formdata = new FormData(this); 
    formdata.append('key1', 'value1'); 
    formdata.append('key2', 'value2'); 
    $.ajax({ 
     url: 'https://external-website.com/', 
     type: 'POST', 
     data: formdata, 
     processData: false, 
     contentType: false 
    }); 
}); 


<form id="myform" method="post" enctype="multipart/form-data"> 
    <input type="file" name="file"> 
    <input type="submit" value="Upload"> 
</form> 

Answer 1

난 당신이 양식은 또한 일반적인 방법을 제출 의미하는 핸들러를 제출 형태로 e.preventDefault();를 호출 표시되지 않습니다 (당신이 보낸 아약스 요청 외에도). 첫 번째 예에서 작동하는 경우 일 수 있습니다. 양식의 모든 필드가 있고 제출 된 것입니다. dev 도구의 네트워크 탭을 확인하여 요청이 어떻게 이루어지고 페이지가 다시로드되는지 확인하십시오. 또한 수신 된 요청 수와 매개 변수를 서버에서 추적합니다.