아약스 파일 업로드에 FormData 사용 방법

아약스 파일 업로드에 FormData 사용 방법

이것은 드래그 앤 드롭 기능을 사용하여 동적으로 생성하는 내 HTML입니다.

<form method="POST" id="contact" name="13" class="form-horizontal wpc_contact" novalidate="novalidate" enctype="multipart/form-data">
<fieldset>
    <div id="legend" class="">
        <legend class="">file demoe 1</legend>
        <div id="alert-message" class="alert hidden"></div>
    </div>

    <div class="control-group">
        <!-- Text input-->
        <label class="control-label" for="input01">Text input</label>
        <div class="controls">
            <input type="text" placeholder="placeholder" class="input-xlarge" name="name">
            <p class="help-block" style="display:none;">text_input</p>
        </div>
        <div class="control-group">  </div>
        <label class="control-label">File Button</label>

        <!-- File Upload --> 
        <div class="controls">
            <input class="input-file" id="fileInput" type="file" name="file">
        </div>
    </div>
    <div class="control-group">    

        <!-- Button --> 
        <div class="controls">
            <button class="btn btn-success">Button</button>
        </div>
    </div>
</fieldset>
</form> 

이건 내 js 코드입니다 ...

<script>
    $('.wpc_contact').submit(function(event){
        var formname = $('.wpc_contact').attr('name');
        var form = $('.wpc_contact').serialize();               
        var FormData = new FormData($(form)[1]);

        $.ajax({
            url : '<?php echo plugins_url(); ?>'+'/wpc-contact-form/resources/js/tinymce.php',
            data : {form:form,formname:formname,ipadd:ipadd,FormData:FormData},
            type : 'POST',
            processData: false,
            contentType: false,
            success : function(data){
            alert(data); 
            }
        });
   }

해결법

1. ==============================

   1.

   올바른 양식 데이터 사용을 위해서는 2 단계를 수행해야합니다.

   준비

   FormData ()에 전체 양식을 제공하여 처리 할 수 ​​있습니다.

   var form = $('form')[0]; // You need to use standard javascript object here
   var formData = new FormData(form);
   

   또는 FormData ()에 대한 정확한 데이터 지정

   var formData = new FormData();
   formData.append('section', 'general');
   formData.append('action', 'previewImg');
   // Attach file
   formData.append('image', $('input[type=file]')[0].files[0]); 
   

   양식 보내기

   jquery를 사용하는 Ajax 요청은 다음과 같습니다.

   $.ajax({
       url: 'Your url here',
       data: formData,
       type: 'POST',
       contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
       processData: false, // NEEDED, DON'T OMIT THIS
       // ... Other options like success and etc
   });
   

   이것 이후 당신은 enctype = "multipart / form-data"를 가진 정규 양식을 제출하는 것처럼 아약스 요청을 보낼 것입니다.

   업데이트 : POST 요청을 통해 모든 파일을 보내야하기 때문에이 요청은 옵션없이 "POST"옵션없이 작동 할 수 있습니다.

   참고 : contentType : false는 jQuery 1.6 이상에서만 사용 가능합니다.

2. ==============================

   2.

   나는 명성이 충분하지 않기 때문에 위의 설명을 추가 할 수는 없지만 위의 대답은 나를 위해 거의 완벽했다.

   유형 : "POST"

   .ajax 호출. 나는 내가 뭘 잘못했는지 알아 내려고 몇 분 동안 머리를 긁적인데, 그게 다 필요한 것이고 치료를 해주는 것입니다. 이것이 전체 내용입니다 :

   위의 답변에 대한 전체 신용, 이것은 그저 작은 비틀기입니다. 이는 누군가 다른 사람이 갇히고 명백한 것을 볼 수없는 경우입니다.

     $.ajax({
       url: 'Your url here',
       data: formData,
       type: "POST", //ADDED THIS LINE
       // THIS MUST BE DONE FOR FILE UPLOADING
       contentType: false,
       processData: false,
       // ... Other options like success and etc
   })
   

3. ==============================

   3.

   <form id="upload_form" enctype="multipart/form-data">
   

   CodeIgniter 파일 업로드가 포함 된 jQuery :

   var formData = new FormData($('#upload_form')[0]);
   
   formData.append('tax_file', $('input[type=file]')[0].files[0]);
   
   $.ajax({
       type: "POST",
       url: base_url + "member/upload/",
       data: formData,
       //use contentType, processData for sure.
       contentType: false,
       processData: false,
       beforeSend: function() {
           $('.modal .ajax_data').prepend('<img src="' +
               base_url +
               '"asset/images/ajax-loader.gif" />');
           //$(".modal .ajax_data").html("<pre>Hold on...</pre>");
           $(".modal").modal("show");
       },
       success: function(msg) {
           $(".modal .ajax_data").html("<pre>" + msg +
               "</pre>");
           $('#close').hide();
       },
       error: function() {
           $(".modal .ajax_data").html(
               "<pre>Sorry! Couldn't process your request.</pre>"
           ); // 
           $('#done').hide();
       }
   });
   

   당신이 사용할 수있는.

   var form = $('form')[0]; 
   var formData = new FormData(form);     
   formData.append('tax_file', $('input[type=file]')[0].files[0]);
   

   또는

   var formData = new FormData($('#upload_form')[0]);
   formData.append('tax_file', $('input[type=file]')[0].files[0]); 
   

   둘 다 작동합니다.

4. ==============================

   4.

   실제로 XMLHttpRequest (). send ()를 사용할 수있는 문서가 나와 있습니다. 단순히 다중 형식의 데이터를 보내는 것  jquery가 짜증나는 경우

5. ==============================

   5.

   View:
   <label class="btn btn-info btn-file">
   Import <input type="file" style="display: none;">
   </label>
   <Script>
   $(document).ready(function () {
                   $(document).on('change', ':file', function () {
                       var fileUpload = $(this).get(0);
                       var files = fileUpload.files;
                       var bid = 0;
                       if (files.length != 0) {
                           var data = new FormData();
                           for (var i = 0; i < files.length ; i++) {
                               data.append(files[i].name, files[i]);
                           }
                           $.ajax({
                               xhr: function () {
                                   var xhr = $.ajaxSettings.xhr();
                                   xhr.upload.onprogress = function (e) {
                                       console.log(Math.floor(e.loaded / e.total * 100) + '%');
                                   };
                                   return xhr;
                               },
                               contentType: false,
                               processData: false,
                               type: 'POST',
                               data: data,
                               url: '/ControllerX/' + bid,
                               success: function (response) {
                                   location.href = 'xxx/Index/';
                               }
                           });
                       }
                   });
               });
   </Script>
   Controller:
   [HttpPost]
           public ActionResult ControllerX(string id)
           {
               var files = Request.Form.Files;
   ...
   

6. ==============================

   6.

   $('#form-withdraw').submit(function(event) {
   
       //prevent the form from submitting by default
       event.preventDefault();
   
   
   
       var formData = new FormData($(this)[0]);
   
       $.ajax({
           url: 'function/ajax/topup.php',
           type: 'POST',
           data: formData,
           async: false,
           cache: false,
           contentType: false,
           processData: false,
           success: function (returndata) {
             if(returndata == 'success')
             {
               swal({
                 title: "Great",
                 text: "Your Form has Been Transfer, We will comfirm the amount you reload in 3 hours",
                 type: "success",
                 showCancelButton: false,
                 confirmButtonColor: "#DD6B55",
                 confirmButtonText: "OK",
                 closeOnConfirm: false
               },
               function(){
                 window.location.href = '/transaction.php';
               });
             }
   
             else if(returndata == 'Offline')
             {
                 sweetAlert("Offline", "Please use other payment method", "error");
             }
           }
       });
   
   
   
   }); 
   

from https://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload by cc-by-sa and MIT lisence