formData()는 데이터를 추가 한 후 데이터를 제공하지 않습니다.

Question

네 번째 줄은 양식 요소를 제공하지만 다섯 번째 줄은 아무것도 표시하지 않습니다. 나는 어떻게해야합니까?

$('#btnSave').click(function() { 
       var form = $("#myForm"); 
       var formData = new FormData($(form)[0]); 
       console.log(form);//this gives form elements 
       console.log(formData);// but this gives nothing 
       var url = '<?php echo base_url() ?>' + 'product/add'; 
        $.ajax({ 
         type    : 'post', 
         url     : url, 
         processData: false, 
         contentType: false, 
         data: formData, 
         success: function (response) { 
          if (response){ 
           $('#myModal').modal('hide'); 
           $('#myForm')[0].reset(); 
           $('.alert-success').html('Record Added').fadeIn().delay(4000).fadeOut('slow'); 

          } else { 
           alert('Error'); 
          } 
         }, 
         error: function() { 
          alert('could not add data'); 
         } 
        });      
       }); 
      }); 

// formData 객체에 아무 것도 추가하지 않습니다. 어떤 해결책을 주시겠습니까?

Answer 1

아래 코드를 시도하고 아약스 코드를 약간 변경하십시오. 코드에 아래 매개 변수를 추가하십시오.

processData : 거짓,
의 contentType : 거짓,

그리고 아약스가 시작되기 전에 var formData = new FormData($("#formID")[0]); 줄을 추가합니다.

또는 아래 코드를 확인하고 코드에 따라 변경하십시오. 코드에서

$('#btnSave').click(function (event) { 
     var form = $("#myForm"); 
     var formData = new FormData($(form)[0]);;   
     var url = '<?php echo base_url() ?>' + 'product/add'; 
     if($('#picture').val()==''){ 
      alert("please select the file"); 
     } else{ 
      $.ajax({ 
       type: 'ajax', 
       data: formData, 
       url: url, 
       method: 'POST', 
       processData: false, 
       contentType: false, 
       success: function (response) { 
        if (response) { 
         $('#myModal').modal('hide'); 
         $('#myForm')[0].reset(); 
         $('.alert-success').html('Record Added').fadeIn().delay(4000).fadeOut('slow'); 
         setTimeout(function() {// wait for 5 secs(2) 
          location.reload(); // then reload the page.(3) 
         }, 1); 
        } else { 
         alert('Error'); 
        } 
       }, 
       error: function() { 
        alert('could not add data'); 
       } 

      }); 
     } 
    }); 
}); 

Answer 2

나는 아약스에 사용하고 코드를 여기에 둘 이상의 실수가 있기 때문에 쓸 수있는 올바른 방법으로 당신의 실수는 당신이 type: "ajax"를 사용하고 여기에

  var form=document.getElementById('form_id'); 
      var fdata=new FormData(form); 
      $.ajax({ 
       type: "POST", 
       url: 'Your_url', 
       dataType: 'json', 
       data:fdata, 
       processData: false, 
       contentType: false, 
       beforeSend: function() { 

       }, 
       success: function (data) { 

        //Do something on response 
       }, 
       complete: function() { 

       } 
      }); 

되지

즉

코드에서 두 번째 실수는 코드의 세 번째 줄에 두 개의 세미콜론 (;)으로 끝났기 때문에 자바 스크립트가 작동하지 않는 이유입니다.

이 방법이 도움이되기를 바랍니다.