JQuery AJAX를 사용하여 FormData와 문자열 데이터를 동시에 보내는 방법

JQuery AJAX를 통해 FormData 및 문자열 데이터를 동시에 전송

단일 AJAX 요청을 통해 파일 데이터와 일반 입력 문자열 데이터를 모두 전송할 수 있습니다. FormData()를 사용합니다. 예를 들어 파일 데이터와 함께 서버 요청에 포함하려는 숨겨진 입력 필드가 여러 개 있을 수 있습니다.

다음 HTML 형식을 고려하세요.

<code class="html"><form action="image.php" method="post" enctype="multipart/form-data">
<input type="file" name="file[]" multiple="" />
<input type="hidden" name="page_id" value="<?php echo $page_id; ?>"/>
<input type="hidden" name="category_id" value="<?php echo $item_category->category_id; ?>"/>
<input type="hidden" name="method" value="upload"/>
<input type="hidden" name="required[category_id]" value="Category ID"/>
</form></code>

다음 JQuery 코드 사용 그러나 숨겨진 입력 데이터는 제외하고 파일 데이터만 전송됩니다.

<code class="jquery">// HTML5 form data object.
var fd = new FormData();

var file_data = object.get(0).files[i];
var other_data = $('form').serialize(); // page_id=&amp;category_id=15&amp;method=upload&amp;required%5Bcategory_id%5D=Category+ID

fd.append("file", file_data);

$.ajax({
    url: 'add.php',
    data: fd,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});</code>

FormData() 내에 파일과 문자열 데이터를 모두 포함하는 핵심은 JQuery 코드를 다음과 같이 수정하는 데 있습니다.

<code class="javascript">var fd = new FormData();
var file_data = $('input[type="file"]')[0].files; // for multiple files
for(var i = 0;i<file_data.length;i++){
    fd.append("file_"+i, file_data[i]);
}
var other_data = $('form').serializeArray();
$.each(other_data,function(key,input){
    fd.append(input.name,input.value);
});
 $.ajax({
    url: 'test.php',
    data: fd,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        console.log(data);
    }
});</code>

수정 사항에서는 여러 파일 입력을 처리하고 .serialize()를 .serializeArray()로 변경하여 .each() 루프에서 조작할 개체 배열을 얻는 for 루프가 도입되었습니다. FormData()에 추가됩니다.

위 내용은 JQuery AJAX를 사용하여 FormData와 문자열 데이터를 동시에 보내는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!