programing

jQuery.ajax를 사용하여 멀티파트/폼데이터 전송

goodsources 2023. 3. 22. 21:08
반응형

jQuery.ajax를 사용하여 멀티파트/폼데이터 전송

jQuery의 ajax 함수를 사용하여 서버측 PHP 스크립트로 파일을 보내는 데 문제가 있습니다.- the리리 it it it it 、 it it 、 it it 、 it it 、 it it it 。$('#fileinput').attr('files')그러나 이 데이터를 서버로 전송하는 것은 어떻게 가능한가? 어레이 「 」 )$_POST0 0（ php-script ） 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);
    }
});

5부터는 Safari 5/Firefox 4를 가장 쉽게 수 .FormData 링크:

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

, 그럼 '아아아아아아아아아아아아아아아아아아아아아...FormDataXMLHttpRequest: XMLHttpRequest: XMLHttpRequest입니다.

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 " " " option to " " option to " )false가 jQuery를 하지 Content-Type그렇지 않으면 경계 문자열이 누락됩니다.아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아processDatafalse로 되어 있지 는 false의 합니다.FormData스트링으로 만들 수 있지만 실패하게 됩니다.

이제 다음을 사용하여 PHP에서 파일을 가져올 수 있습니다.

$_FILES['file-0']

요.file-0(「」를 하지 않는 multiple이 경우 각 파일에 따라 숫자가 증가합니다.)

이전 브라우저에 대한 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 개체를 만들 수도 있습니다.

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

카운터 대신 PHP 네이티브 어레이 사용

파일 요소에 동일한 이름을 붙이고 괄호로 이름을 끝냅니다.

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

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

내 코드를 봐, 나한테는 효과가 있어

$( '#formId' )
  .submit( function( e ) {
    $.ajax( {
      url: 'FormSubmitUrl',
      type: 'POST',
      data: new FormData( this ),
      processData: false,
      contentType: false
    } );
    e.preventDefault();
  } );

라파엘의 훌륭한 대답에 조금 더 덧붙이고 싶었어요.은 PHP가 한 PHP를 $_FILES(JavaScript)

HTML 양식:

<form enctype="multipart/form-data" action="/test.php" 
method="post" class="putImages">
   <input name="media[]" type="file" multiple/>
   <input class="button" type="submit" alt="Upload" value="Upload" />
</form>

는 이 PHP를 합니다.$_FILESJavaScript:

Array
(
    [media] => Array
        (
            [name] => Array
                (
                    [0] => Galata_Tower.jpg
                    [1] => 518f.jpg
                )

            [type] => Array
                (
                    [0] => image/jpeg
                    [1] => image/jpeg
                )

            [tmp_name] => Array
                (
                    [0] => /tmp/phpIQaOYo
                    [1] => /tmp/phpJQaOYo
                )

            [error] => Array
                (
                    [0] => 0
                    [1] => 0
                )

            [size] => Array
                (
                    [0] => 258004
                    [1] => 127884
                )

        )

)

만약 당신이 점진적인 확장을 한다면, 라파엘의 JS를 사용해서 파일을 제출한다면...

var data = new FormData($('input[name^="media"]'));     
jQuery.each($('input[name^="media"]')[0].files, function(i, file) {
    data.append(i, file);
});

$.ajax({
    type: ppiFormMethod,
    data: data,
    url: ppiFormActionURL,
    cache: false,
    contentType: false,
    processData: false,
    success: function(data){
        alert(data);
    }
});

의 PHP입니다.$_FILES JavaScript를 전송한 후 배열은 다음과 

Array
(
    [0] => Array
        (
            [name] => Galata_Tower.jpg
            [type] => image/jpeg
            [tmp_name] => /tmp/phpAQaOYo
            [error] => 0
            [size] => 258004
        )

    [1] => Array
        (
            [name] => 518f.jpg
            [type] => image/jpeg
            [tmp_name] => /tmp/phpBQaOYo
            [error] => 0
            [size] => 127884
        )

)

배열이며,은 그것을 시킨다. 그리고 실제로 어떤 사람들은$_FILES이 된다는 을 알게 되었습니다.$_FILES(JavaScript가 전송에 사용되었는지 여부에 관계없이)다음은 JS에 대한 몇 가지 사소한 변경 사항입니다.

// match anything not a [ or ]
regexp = /^[^[\]]+/;
var fileInput = $('.putImages input[type="file"]');
var fileInputName = regexp.exec( fileInput.attr('name') );

// make files available
var data = new FormData();
jQuery.each($(fileInput)[0].files, function(i, file) {
    data.append(fileInputName+'['+i+']', file);
});

(2017년 4월 14일 편집:Safari에서 이 코드를 수정한 FormData()의 생성자에서 폼 요소를 삭제했습니다.

그 암호는 두 가지 역할을 한다.

  1. 검색합니다.input이름을 자동으로 지정하여 HTML의 유지보수가 용이해집니다. 이제 ,, 제, 이, ,, ,, ,, , now.form putImages,됩니다.putImages는 putImages를 사용합니다. ,, ②,input특별한 이름은 필요 없습니다.
  2. 일반 HTML에서 제출하는 배열 형식은 data.append 행의 JavaScript에 의해 재생성됩니다.대괄호에 주의해 주세요.

을 통해 한 JavaScript가 됩니다.$_FILESHTML을 입니다.

제가 읽은 정보를 바탕으로 이 기능을 만들었습니다.

use using 를 사용하듯이 사용하세요..serialize() " " " " " 를 입력합니다..serializefiles();.
여기서 시험 보는 중이야

//USAGE: $("#form").serializefiles();
(function($) {
$.fn.serializefiles = function() {
    var obj = $(this);
    /* ADD FILE TO PARAM AJAX */
    var formData = new FormData();
    $.each($(obj).find("input[type='file']"), function(i, tag) {
        $.each($(tag)[0].files, function(i, file) {
            formData.append(tag.name, file);
        });
    });
    var params = $(obj).serializeArray();
    $.each(params, function (i, val) {
        formData.append(val.name, val.value);
    });
    return formData;
};
})(jQuery);

HTML에 폼이 정의되어 있는 경우 이미지를 반복하고 추가하는 것보다 폼을 컨스트럭터에 전달하는 것이 더 쉽습니다.

$('#my-form').submit( function(e) {
    e.preventDefault();

    var data = new FormData(this); // <-- 'this' is your form element

    $.ajax({
            url: '/my_URL/',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',     
            success: function(data){
            ...

Devin Venable의 답변은 제가 원하는 것에 가까웠지만, 저는 여러 폼에서 동작하고, 각 파일이 올바른 위치에 갈 수 있도록 이미 지정된 동작을 사용하는 것을 원했습니다.

또한 .ready()를 사용하지 않도록 jQuery의 on() 메서드를 사용하고 싶었습니다.

(form Selector를 jQuery 셀렉터로 대체)

$(document).on('submit', formSelecter, function( e ) {
        e.preventDefault();
    $.ajax( {
        url: $(this).attr('action'),
        type: 'POST',
        data: new FormData( this ),
        processData: false,
        contentType: false
    }).done(function( data ) {
        //do stuff with the data you got back.
    });

});

입력이 「」인 .name과 플래그를 .multiple의합니다.formFormData 반복해서 말할 append()입력 파일 FormData여러 파일이 자동으로 처리됩니다.

$('#submit_1').on('click', function() {
  let data = new FormData($("#my_form")[0]);

  $.ajax({
    url: '/path/to/php_file',
    type: 'POST',
    data: data,
    processData: false,
    contentType: false,
    success: function(r) {
      console.log('success', r);
    },
    error: function(r) {
      console.log('error', r);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my_form">
  <input type="file" name="multi_img_file[]" id="multi_img_file" accept=".gif,.jpg,.jpeg,.png,.svg" multiple="multiple" />
  <button type="button" name="submit_1" id="submit_1">Not type='submit'</button>
</form>

의 「」는 해 주세요.button type="button"type="submit"은, 사용법에 하지 않는 있습니다submit이 기능을 사용할 수 있습니다.

결과, 「」가 됩니다.$_FILES크롬 개발

multi_img_file:
  error: (2) [0, 0]
  name: (2) ["pic1.jpg", "pic2.jpg"]
  size: (2) [1978036, 2446180]
  tmp_name: (2) ["/tmp/phphnrdPz", "/tmp/phpBrGSZN"]
  type: (2) ["image/jpeg", "image/jpeg"]

주의: 일부 이미지는 단일 파일로 업로드하면 정상적으로 업로드되지만 여러 파일로 업로드하면 업로드에 실패할 수 있습니다.은 PHP가 빈 PHP를 입니다.$_POST ★★★★★★★★★★★★★★★★★」$_FILES에이잭스Chrome 75.0.3770.100 PHP 7.0입니다.내 테스트 세트에 있는 수십 개의 이미지 중 1개만 발생하는 것 같습니다.

요즘은 jQuery:) fetch API 지원 테이블도 필요 없습니다.

let result = fetch('url', {method: 'POST', body: new FormData(document.querySelector("#form"))})

Form Data 클래스는 동작하지만 iOS Safari(iPhone에서는)에서는 Raphael Schweikert의 솔루션을 그대로 사용할 수 없었습니다.

Mozilla Dev에는 FormData 객체 조작에 대한 좋은 페이지가 있습니다.

따라서 페이지 어딘가에 다음 enctype을 지정하는 빈 양식을 추가합니다.

<form enctype="multipart/form-data" method="post" name="fileinfo" id="fileinfo"></form>

그런 다음 다음과 같이 FormData 개체를 만듭니다.

var data = new FormData($("#fileinfo"));

라파엘의 암호대로 진행하도록 하지

오늘 우연히 만난 gotcha는 이 문제와 관련하여 지적할 가치가 있다고 생각합니다.ajax 콜의 URL이 리다이렉트되면 content-type: 'multipart/form-data'의 헤더가 손실될 수 있습니다.

예를 들어, 저는 http://server.com/context?param=x에 글을 올렸습니다.

Chrome의 네트워크 탭에서 이 요청에 대한 올바른 멀티파트 헤더를 확인했지만 302는 http://server.com/context/?slash=x로 리디렉션합니다(콘텍스트 뒤에 슬래시 표시).

리다이렉트 중에 멀티파트헤더가 손실되었습니다.이러한 솔루션이 작동하지 않는 경우 요청이 리디렉션되지 않는지 확인하십시오.

이전 버전의 IE는 FormData를 지원하지 않습니다(FormData에 대한 전체 브라우저 지원 목록은 https://developer.mozilla.org/en-US/docs/Web/API/FormData)를 참조하십시오.

jquery 플러그인(예: http://malsup.com/jquery/form/ #code-display)을 사용하거나 IFrame 기반 솔루션을 사용하여 Ajax를 통해 멀티파트 폼 데이터를 게시할 수 있습니다.https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript

위의 솔루션은 모두 양호하고 우아해 보이지만 FormData() 오브젝트는 파라미터가 필요 없습니다.인스턴스화한 후 append()를 사용합니다.

formData.append(val.name, val.value);

  1. jquery-> $("#id")[0]에 의한 폼 오브젝트 취득
  2. data = 새 FormData("$("#id")[0];
  3. 그래, 데이터는 네가 원하는 거야

언급URL : https://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax

반응형

'programing' 카테고리의 다른 글

스프링 부트 JVM을 UTC 시간대로 강제 설정하려면 어떻게 해야 하나요?  (0) 2023.03.22
종속성 트리 Reactjs를 확인할 수 없습니다.  (0) 2023.03.22
Woocommerce에서 제품 이름별로 제품 퍼멀링크 가져오기  (0) 2023.03.17
MongoDB의 $in 조항은 주문을 보증합니까?  (0) 2023.03.17
AngularJs .$setPris틴에서 폼 리셋  (0) 2023.03.17

'programing'의 다른글

  • 현재글jQuery.ajax를 사용하여 멀티파트/폼데이터 전송

관련글

댓글

티스토리툴바