javascript $ .ajaxでの不正な呼び出し

Question

Laravelでajaxを使用して画像をアップロードしたいとします。フォームデータを送信すると、私はコンソールに

Uncaught TypeError: Illegal invocation 
at e (jquery-2.1.4.js:4) 
at Ab (jquery-2.1.4.js:4) 
at Function.n.param (jquery-2.1.4.js:4) 
at Function.ajax (jquery-2.1.4.js:4) 
at HTMLFormElement.<anonymous> (products:153) 
at HTMLFormElement.dispatch (jquery-2.1.4.js:3) 
at HTMLFormElement.r.handle (jquery-2.1.4.js:3) 

を与えています。私はネットワークを調べ、formDataが問題ないことを発見しました。ここで

は私のAJAX呼び出し

$('#product_form').on('submit', function (e) { 
    e.preventDefault(); 

    var form_data = new FormData($('#product_form')[0]); 
    $.ajax({ 
     type: 'POST', 
     url: '/admin/insert/products', 
     data : form_data, 
     success: function (result) { 
      if(result.success == 1){ 
       $('#product_message').html('product Successfully Added!!'); 
      } 
     }, 
     error: function(result){ 
      $('#product_message').html('Something went wrong!! Login Again!!'); 
      $('#product_submit').prop("disabled" ,false); 
      $('#product_submit').html("Add product"); 
     } 
    }); 
}); 

であり、これは、ビューの私のフォームで

<form class="col s12" method="post" enctype="multipart/form-data" id="product_form"> 
    <input type="hidden" name="_token" value="{{ csrf_token() }}"> 
    <div class="row"> 
     <div class="input-field col s12 m4 offset-m4"> 
      <input id="name" type="text" class="validate" name="name"> 
      <label for="name">Item Name</label> 
     </div> 
     <div class="input-field col s12 m4 offset-m4"> 
      <input id="tagline" type="text" class="validate" name="tagline"> 
      <label for="tagline">Tagline</label> 
     </div> 
     <div class="input-field col s12 m4 offset-m4"> 
      <div class="file-field input-field"> 
       <div class="btn red"> 
        <span>Item Pic</span> 
        <input type="file" id="pic" name="item"> 
       </div> 
       <div class="file-path-wrapper"> 
        <input class="file-path validate" type="text"> 
       </div> 
      </div> 
     </div> 
     <div class="input-field col s12 m4 offset-m4"> 
      <input id="brand" type="text" class="validate" name="brand" style="text-transform:uppercase;"> 
      <label for="brand">Brand Name</label> 
     </div> 
     <div class="input-field col s12 m4 offset-m4"> 
      <select name="category"> 
       <option value="" selected>Choose Category</option> 
       @foreach($categories as $category) 
       <option value="{{$category->name}}">{{$category->name}}</option> 
        @endforeach 
      </select> 
      <label>Select Item Category</label> 

     </div> 
     <div class="input-field col s12 m4 offset-m4"> 
      <button type="submit" class="btn col s12 red" id="product_submit">Add Product</button> 
     </div> 
    </div> 
</form> 

Answer 1

$.ajaxに渡されたオブジェクトに次のパラメータを追加します。

contentType: false, 
// The following is necessary so jQuery won't try to convert the object into a string 
processData: false