jQuery.ajax로 multipart / formdata 보내기

질문 : jQuery.ajax로 multipart / formdata 보내기

---

jQuery의 ajax 함수를 사용하여 서버 측 PHP 스크립트에 파일을 보내는 데 문제가 있습니다. $('#fileinput').attr('files') 하여 파일 목록을 가져올 수 있지만이 데이터를 서버로 보낼 수있는 방법은 무엇입니까? 파일 입력을 사용할 때 서버 측 php-script의 결과 배열 ( $_POST NULL

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

이것은 비교적 새로운 것으로 보이므로 XHR / Ajax를 통한 파일 업로드가 불가능하다는 점을 언급하지 마십시오. 확실히 작동하기 때문입니다.

Safari 5, FF 및 Chrome의 기능이 필요하지만 필수는 아닙니다.

지금 내 코드는 다음과 같습니다.

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

답변

---

Safari 5 / Firefox 4부터 FormData 클래스를 사용하는 것이 가장 쉽습니다.

var data = new FormData();
jQuery.each(jQuery('#file')[0].files, function(i, file) {
    data.append('file-'+i, file);
});

이제 XMLHttpRequest와 함께 보낼 준비가 된 FormData

jQuery.ajax({
    url: 'php/upload.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    method: 'POST',
    type: 'POST', // For jQuery < 1.9
    success: function(data){
        alert(data);
    }
});

contentType 옵션을 false 설정하여 Content-Type 헤더를 추가하지 않도록해야합니다. 그렇지 않으면 경계 문자열이 누락됩니다. processData 플래그를 false로 설정해야합니다 FormData 를 문자열로 변환하려고 시도하여 실패합니다.

이제 다음을 사용하여 PHP에서 파일을 검색 할 수 있습니다.

$_FILES['file-0']

multiple 속성을 지정하지 않는 한 file-0 파일 하나만 있습니다.이 경우 숫자는 각 파일마다 증가합니다.)

이전 브라우저에 FormData 에뮬레이션 사용

var opts = {
    url: 'php/upload.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    method: 'POST',
    type: 'POST', // For jQuery < 1.9
    success: function(data){
        alert(data);
    }
};
if(data.fake) {
    // Make sure no text encoding stuff is done by xhr
    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);

기존 양식에서 FormData 만들기

파일을 수동으로 반복하는 대신 기존 양식 객체의 내용을 사용하여 FormData 객체를 만들 수도 있습니다.

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

카운터 대신 PHP 네이티브 배열 사용

파일 요소의 이름을 동일하게 지정하고 이름을 대괄호로 끝냅니다.

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

$_FILES['file'] 은 업로드 된 모든 파일에 대한 파일 업로드 필드를 포함하는 배열이됩니다. 반복하는 것이 더 간단하기 때문에 실제로 초기 솔루션보다 이것을 권장합니다.

출처 : https://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax