Sending multipart/formdata with jQuery.ajaxjQuery.ajax를 사용하여 multipart/formdata 보내기

제가 jQuery의 ajax 함수를 사용하여 서버 측 PHP 스크립트로 파일을 전송하는 문제가 있습니다.
$('#fileinput').attr('files')를 사용하여 파일 목록을 가져올 수 있지만,이 데이터를 서버로 전송하는 방법은 어떻게 가능한가요? 파일 입력을 사용할 때 결과 배열($_POST)은 0(NULL) 입니다.

지금까지 jQuery 솔루션을 찾지 못했지만 가능하다는 것은 알고 있습니다 (Protoype 코드만 찾았습니다 (http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html)).

이것은 상대적으로 새로운 것 같으므로 XHR/Ajax를 통한 파일 업로드가 불가능하다고 언급하지 마세요. 분명히 작동합니다.

지금까지의 코드는 다음과 같습니다:

$.ajax({
    url: 'php/upload.php',
    data: $('#file').attr('files'),
    cache: false,
    contentType: 'multipart/form-data',
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

$.ajax({
    url: 'php/upload.php',
    data: $('#file').attr('files'),
    cache: false,
    contentType: 'multipart/form-data',
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

답변 1

var opts = {
    url: 'php/upload.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    method: 'POST',
    type: 'POST', // jQuery < 1.9 için
    success: function(data){
        alert(data);
    }
};
if(data.fake) {
    // xhr tarafından herhangi bir metin kodlama işlemi yapılmaması için emin olun
    opts.xhr = function() { var xhr = jQuery.ajaxSettings.xhr(); xhr.send = xhr.sendAsBinary; return xhr; }
    opts.contentType = multipart/form-data; boundary=+data.boundary;
    opts.data = data.toString();
}
jQuery.ajax(opts);

Mevcut formdan FormData oluşturma

Dosyaları manuel olarak döngüyle gezme yerine, FormData nesnesi mevcut bir form nesnesinin içeriğiyle de oluşturulabilir:

var data = new FormData(jQuery('form')[0]);

Bir sayaç yerine PHP yerel bir dizi kullanma

Dosya elemanlarınızı aynı şekilde isimlendirin ve ismi köşeli parantezlerle bitirin:

jQuery.each(jQuery('#file')[0].files, function(i, file) {
    data.append('file[]', file);
});

$_FILES['file']는 업로드된 각 파일을 포함하는 배열입니다. 초기 솔루션보다 반복이 간단하므로이 방법을 권장합니다.

답변 2

jQuery.ajax를 사용하여 multipart/formdata를 전송하는 방법은 무엇인지 알아보겠습니다.
multipart/formdata는 HTTP 요청 형식 중 하나로, 클라이언트가 서버로 여러 종류의 데이터를 전송할 수 있도록 해줍니다. 이 형식은 파일 업로드를 포함한 다양한 데이터를 전송할 수 있어 유용합니다. jQuery.ajax를 사용하면 JavaScript를 통해 이 요청을 쉽게 생성하고 전송할 수 있습니다.
먼저, jQuery 라이브러리를 프로젝트에 추가한 후, multipart/formdata를 전송할 요청을 생성합니다. 이를 위해 $.ajax() 함수를 사용합니다. 이 함수는 다양한 매개변수를 받으며, 우리가 주목해야 할 매개변수는 url, type, data, processData, contentType입니다.
url 매개변수에는 요청을 보낼 서버의 URL을 지정합니다. type은 HTTP 요청 메서드를 지정하는데, 일반적으로 POST를 사용합니다. data는 서버로 전송할 데이터를 담고 있는 객체입니다. 이 객체에는 파일 업로드를 포함한 여러 데이터를 넣을 수 있습니다.
processData 매개변수는 데이터를 분석하는 방법을 나타내며, 일반적으로 false로 설정해야 합니다. 이는 jQuery가 데이터를 문자열로 변환하지 않도록 해서 파일 업로드가 제대로 작동하도록 합니다. contentType은 데이터 유형을 지정하는데, multipart/formdata로 설정해야 합니다.
이렇게 설정된 매개변수를 가진 $.ajax() 함수를 호출하여 서버에 요청을 전송합니다. 서버는 이 요청을 받고, 클라이언트가 전송한 데이터를 처리합니다.
이와 같이 jQuery.ajax를 사용하여 multipart/formdata를 전송하는 방법은 다양한 프로젝트에서 유용하게 사용될 수 있습니다. 파일 업로드, 이미지 업로드, 폼 데이터 전송 등 다양한 용도로 이를 활용할 수 있습니다.
당신이 웹 개발을 공부하거나 혹은 이미 개발자인 경우, jQuery.ajax를 사용하여 multipart/formdata를 전송하는 방법을 익히는 것은 중요합니다. 이를 통해 사용자 친화적인 웹 애플리케이션을 개발할 수 있으며, 더 많은 사용자들이 검색 엔진에서 찾을 수 있도록 SEO 측면에서도 도움이 될 것입니다.