[JQUERY] 어떻게 jQuery를 아약스 - 요청 FormData 객체를 보내? [복제]

어떻게 jQuery를 아약스 - 요청 FormData 객체를 보내? [복제]

해결법

1. ---

   1.난 당신이 이런 식으로 할 수 있으리라 생각합니다 :

   난 당신이 이런 식으로 할 수 있으리라 생각합니다 :

   var fd = new FormData();    
   fd.append( 'file', input.files[0] );
   
   $.ajax({
     url: 'http://example.com/script.php',
     data: fd,
     processData: false,
     contentType: false,
     type: 'POST',
     success: function(data){
       alert(data);
     }
   });
   

   노트:

2. ---

   2.당신을 위해 사용할 수있는 몇 아직 언급 할 수있는 기술이있다. 아약스 PARAMS에서의 contentType 속성을 설정 시작합니다.

   당신을 위해 사용할 수있는 몇 아직 언급 할 수있는 기술이있다. 아약스 PARAMS에서의 contentType 속성을 설정 시작합니다.

   pradeek의 예에 건물 :

   $('form').submit(function (e) {
       var data;
   
       data = new FormData();
       data.append('file', $('#file')[0].files[0]);
   
       $.ajax({
           url: 'http://hacheck.tel.fer.hr/xml.pl',
           data: data,
           processData: false,
           type: 'POST',
   
           // This will override the content type header, 
           // regardless of whether content is actually sent.
           // Defaults to 'application/x-www-form-urlencoded'
           contentType: 'multipart/form-data', 
   
           //Before 1.5.1 you had to do this:
           beforeSend: function (x) {
               if (x && x.overrideMimeType) {
                   x.overrideMimeType("multipart/form-data");
               }
           },
           // Now you should be able to do this:
           mimeType: 'multipart/form-data',    //Property added in 1.5.1
   
           success: function (data) {
               alert(data);
           }
       });
   
       e.preventDefault();
   });
   

   비 예상되는 일을 jQuery를 아약스를 강요 할 때 경우에 따라서는 beforeSend 이벤트는 그것을 할 수있는 좋은 장소입니다. 사람들이 그 1.5.1에 ​​jQuery를에 추가되기 전에 MIME 타입 재정의 beforeSend을 사용하고 잠시 동안. 당신은 방금 전에 전송 이벤트에 jqXHR 객체에 아무것도 수정할 수 있어야합니다.

3. ---

   3.당신은 다음과 같은 코드를 사용하여 아약스 요청에 FormData 객체를 보낼 수 있습니다

   당신은 다음과 같은 코드를 사용하여 아약스 요청에 FormData 객체를 보낼 수 있습니다

   $("form#formElement").submit(function(){
       var formData = new FormData($(this)[0]);
   });
   

   이것은 허용 대답하지만, 질문 항목에 대한 실제 대답은 매우 유사하다. 이것은 FormData에 자동으로 폼 요소를 제출하면 FormData 변수에 수동으로 APPEND 데이터에 필요하지 않습니다.

   이 같은 아약스 방법 외모,

   $("form#formElement").submit(function(){
       var formData = new FormData($(this)[0]);
       //append some non-form data also
       formData.append('other_data',$("#someInputData").val());
       $.ajax({
           type: "POST",
           url: postDataUrl,
           data: formData,
           processData: false,
           contentType: false,
           dataType: "json",
           success: function(data, textStatus, jqXHR) {
              //process data
           },
           error: function(data, textStatus, jqXHR) {
              //process error msg
           },
   });
   

   수동과 같은 매개 변수로 FormData 객체 내부의 폼 요소를 전달할 수 있습니다

   var formElem = $("#formId");
   var formdata = new FormData(formElem[0]);
   

   희망이 도움이. ;)

4. ---

   4.나는이 의지의 도움을 희망,이처럼을하고 나를 위해 일입니다 :)

   나는이 의지의 도움을 희망,이처럼을하고 나를 위해 일입니다 :)

      <div id="data">
           <form>
               <input type="file" name="userfile" id="userfile" size="20" />
               <br /><br />
               <input type="button" id="upload" value="upload" />
           </form>
       </div>
     <script>
           $(document).ready(function(){
                   $('#upload').click(function(){
   
                       console.log('upload button clicked!')
                       var fd = new FormData();    
                       fd.append( 'userfile', $('#userfile')[0].files[0]);
   
                       $.ajax({
                         url: 'upload/do_upload',
                         data: fd,
                         processData: false,
                         contentType: false,
                         type: 'POST',
                         success: function(data){
                           console.log('upload success!')
                           $('#data').empty();
                           $('#data').append(data);
   
                         }
                       });
                   });
           });
       </script>   
   

5. ---

   5.당신은 헤더를 조작하는 $ 아약스 beforeSend 이벤트를 사용할 수 있습니다.

   당신은 헤더를 조작하는 $ 아약스 beforeSend 이벤트를 사용할 수 있습니다.

   …

   beforeSend: function(xhr) { 
       xhr.setRequestHeader('Content-Type', 'multipart/form-data');
   }
   

   …

   http://msdn.microsoft.com/en-us/library/ms536752(v=vs.85).aspx : 자세한 내용은이 링크를 참조하십시오

6. ---

   6.자바 스크립트 :

   자바 스크립트 :

   function submitForm() {
       var data1 = new FormData($('input[name^="file"]'));
       $.each($('input[name^="file"]')[0].files, function(i, file) {
           data1.append(i, file);
       });
   
       $.ajax({
           url: "<?php echo base_url() ?>employee/dashboard2/test2",
           type: "POST",
           data: data1,
           enctype: 'multipart/form-data',
           processData: false, // tell jQuery not to process the data
           contentType: false // tell jQuery not to set contentType
       }).done(function(data) {
           console.log("PHP Output:");
           console.log(data);
       });
       return false;
   }
   

   PHP :

   public function upload_file() {
       foreach($_FILES as $key) {
           $name = time().$key['name'];
           $path = 'upload/'.$name;
           @move_uploaded_file($key['tmp_name'], $path);
       }
   }
   

7. ---

   7.당신은 아약스 사용 "jquery.form.js"을 사용하여 파일을 제출하려면 이것은 쉽게 모든 양식 요소를 제출합니다.

   당신은 아약스 사용 "jquery.form.js"을 사용하여 파일을 제출하려면 이것은 쉽게 모든 양식 요소를 제출합니다.

   샘플 http://jquery.malsup.com/form/#ajaxSubmit

   거친보기 :

   <form id='AddPhotoForm' method='post' action='../photo/admin_save_photo.php' enctype='multipart/form-data'>
   

   <script type="text/javascript">
   function showResponseAfterAddPhoto(responseText, statusText)
   { 
       information= responseText;
       callAjaxtolist();
       $("#AddPhotoForm").resetForm();
       $("#photo_msg").html('<div class="album_msg">Photo uploaded Successfully...</div>');        
   };
   
   $(document).ready(function(){
       $('.add_new_photo_div').live('click',function(){
               var options = {success:showResponseAfterAddPhoto};  
               $("#AddPhotoForm").ajaxSubmit(options);
           });
   });
   </script>
   

8. ---

   8.대신 - fd.append ( 'userfile로', $ ( '# userfile로') [0] .files [0]);

   대신 - fd.append ( 'userfile로', $ ( '# userfile로') [0] .files [0]);

   사용 - fd.append ( '파일', $ ( '# userfile로') [0] .files [0]);

from https://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery by cc-by-sa and MIT license