上傳文件是空的Laravel 5.4

Question

我想在我的控制器中使用ajax發送文件數據，但它不起作用。 下面是代碼結構;

形式

<form id="contact_img" enctype="multipart/form-data"> 
     <input type="hidden" name="_token" value="{{ csrf_token() }}"> 
     <input id="contact_image" name="contact_image" type="file" class="file"> 
     <input type="text" class="form-control" name="testtest" id="testtest" required> 
     <button type="submit" class="btn-default">Save</button> 
    </form> 

AJAX

$.ajax({ 
     url: "{{ url('/') }}/admin/upload_contact_img", 
     data: $("#contact_img").serialize(), 
     success: function (data) { 
      alert(data); 
      location.reload(); 
     }, 
    }); 

我的網絡路由

路線::獲得（ '管理/ upload_contact_img'， 'admin_controller @ contact_img_upload'）;

控制器

public function contact_img_upload(Request $form){ 
    if ($form->hasFile('contact_image')){ 
     echo $form->file('contact_image'); 

    }else{ 
     echo "empty"; 
    } 
    echo $form->testtest; 
} 

只有輸入TESTTEST顯示該值。

Answer 1

嘗試使用formData（）代替序列化表單。

$("#contact_img").on('submit', function(e){ 
     e.preventDefault(); 
     var form = new FormData(e.target)   
     $.ajax({ 
     url: "{{ url('/') }}/admin/upload_contact_img", 
     data : form, 
     processData: false, // tell jQuery not to process the data 
     contentType: false, // tell jQuery not to set contentType 
     success: function (data) { 
      alert(data); 
     }, 
     type:'POST' 
    }); 
    }); 

見例如https://jsfiddle.net/cihkem/hk7u9kLf/

Answer 2

使用jQuery.form.js通過AJAX提交表單。你也可以有上傳進度。 訪問以下鏈接。

http://malsup.com/jquery/form/

Answer 3

問題是，阿賈克斯文件上傳不那麼容易的工作。您需要實現例如FileReader。

看到這個答案：Uploading files in HTML5 with Ajax

Answer 4

1）添加id形式提交按鈕

<form id="contact_img" enctype="multipart/form-data"> 
    <input type="hidden" name="_token" value="{{ csrf_token() }}"> 
    <input id="contact_image" name="contact_image" type="file" class="file"> 
    <input type="text" class="form-control" name="testtest" id="testtest" required> 
    <button type="submit" id="submitBtn" class="btn-default">Save</button> 
</form> 

2）阿賈克斯

jQuery(document).ready(function($){ 

    $("#submitBtn").click(function(e) { 

     e.preventDefault(); 
     var contact_image = $("#contact_image").prop("files")[0]; 
     var testtest = $("#testtest").val(); 
     var form_data = new FormData(); 
     form_data.append("contact_image", contact_image); 
     form_data.append("testtest", testtest); 

     $.ajax({ 
      url: './admin/upload_contact_img', 
      type: "POST", 
      data: form_data, 
      dataType: 'json', 
      cache: false, 
      contentType: false, 
      processData: false, 
      success: function(data){ 
       console.log(data.contact_image); 
       console.log(data.testtest); 
      }, 
      error:function(error){ 
       console.log('Something went wrong'); 
      } 
     }); 
    }); 

}); 

3）內部controller

public function contact_img_upload(Request $form){ 
{ 
    if($form->hasFile('image')) { 
     $image = $form->file('image'); 

     //Image handling code // 
    } 

    $testtest = $form->testtest; 
    return response()->json(['contact_image' => $image, 'testtest' => $testtest]); 
} 

如果你需要一個示範項目，只是克隆此項目Laravel-BoilerPlate-Template