FORMDATA是空的 - laravel 5.4

喜的朋友，
我試圖上傳laravel使用AJAX 5.4FORMDATA是空的 - laravel 5.4

問題圖像：
FORMDATA是在服務器端空

CODE：

查看：

<form role="form" action="{{route('auth.upload')}}" method="post" enctype="multipart/form-data" id="form3"> 
    {{ csrf_field() }} 
    <h3>Upload Logo</h3> 

    <div class="form-group"> 
      <label class="custom-file upload-image"> 
      <input type="file" id="image" name="image" class="custom-file-input"> 
      <span class="custom-file-control"></span> 
      </label> 
     </div> 
     <button type="submit" class="btn btn-upload">Save Image</button> 
</form>

JS：

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

    var url = $(this).attr('action'), 
    post = $(this).attr('method'), 
    data = new FormData(this); 

    $.ajax({ 
     url: url, 
     method: post, 
     data: data, 
     success: function(data){ 
      console.log(data); 
     }, 
     error: function(xhr, status, error){ 
      alert(xhr.responseText); 
     }, 
     processData: false, 
     contentType: false 
    }); 
});

路線：

Route::post('home/form3', '[email protected]')->name('auth.upload');

控制器：

public function store(Request $request){ 
    if ($request->ajax()) { 

     return $request->all(); // THIS IS RETURNING EMPTY OBJECT 

     if ($request->hasFile('image')) { 

      $name = $request->image->getClientOriginalName(); 
      $request->image->storeAs('public/upload',$name); 

      $company = new Company; 
      $url = Storage::url($name); 
      $company->update(['image'=>$url]); 

      return response(['msg'=>'image uploaded']); 
     }else{ 
      return response(['msg'=>'No file has selected']); 
     } 
    } 
}

從服務器端

回報的迴應是：

Object {_token: "zFKgoBkdjaIswMG5X0fOyVtaGSYMs84iPDtJA4F5", image: Object} 
    image : Object 
    _token : "zFKgoBkdjaIswMG5X0fOyVtaGSYMs84iPDtJA4F5" 
    __proto__ : Object

我只能看到令牌返回，但沒有上傳圖像的數據。如果我提交表單而不使用ajax，那麼它工作正常。如果不使用AJAX提交

輸出（這是我期待甚至提交使用AJAX輸出）：

array:2 [▼ 
    "_token" => "eVEjl9UW4rU69oz1lIIiuNABZVpRJFldDST02Nje" 
    "image" => UploadedFile {#229 ▼ 
    -test: false 
    -originalName: "empty-normal.png" 
    -mimeType: "image/png" 
    -size: 85494 
    -error: 0 
    #hashName: null 
    path: "C:\xampp\tmp" 
    filename: "php917E.tmp" 
    basename: "php917E.tmp" 
    pathname: "C:\xampp\tmp\php917E.tmp" 
    extension: "tmp" 
    realPath: "C:\xampp\tmp\php917E.tmp" 
    aTime: 2017-05-18 11:17:11 
    mTime: 2017-05-18 11:17:11 
    cTime: 2017-05-18 11:17:11 
    inode: 0 
    size: 85494 
    perms: 0100666 
    owner: 0 
    group: 0 
    type: "file" 
    writable: true 
    readable: true 
    executable: false 
    file: true 
    dir: false 
    link: false 
    linkTarget: "C:\xampp\tmp\php917E.tmp"

} ]

任何一個可以幫助我解決這個問題？

**在此先感謝...

來源

2017-05-18 Himakar

請檢查從FormData函數返回的數據，將其記錄到控制檯中，並查看它是否在那裏記錄。 – Webinion

@PandhiBhaumik感謝您的評論。通過使用控制檯日誌，我們無法檢查formdata。如果我們這樣做，它會返回空對象。這裏是更多關於檢查formdata的解釋[鏈接]（http://stackoverflow.com/questions/17066875/how-to-inspect-formdata）。我發現客戶端腳本沒有錯誤。 – Himakar

所以，我對客戶端是正確的問題？ – Webinion

-1

供您參考

查看文件：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Post</title> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 



</head> 
<body> 






<form role="form" action="<?php echo base_url('welcome/workout') ?>" method="post" enctype="multipart/form-data" id="form3"> 

    <h3>Upload Logo</h3> 

    <div class="form-group"> 
      <label class="custom-file upload-image"> 
      <input type="file" id="image" value="" name="image" class="custom-file-input"> 
      <span class="custom-file-control"></span> 
      </label> 
     </div> 
     <button type="submit" class="btn btn-upload">Save Image</button> 
</form> 


</body> 
</html> 

<script> 


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

    var url = $(this).attr('action'), 
    post = $(this).attr('method'), 
    data = new FormData(this); 

    $.ajax({ 
     url: url, 
     method: post, 
     data: data, 
     success: function(data){ 
      console.log(data); 
     }, 
     error: function(xhr, status, error){ 
      alert(xhr.responseText); 
     }, 
     processData: false, 
     contentType: false 
    }); 
}); 

</script>

和我的控制器

public function workout() 
    { 

     if($_FILES) 
     { 
      echo "<pre>"; print_r($_FILES); exit(); 
     } 

     $this->load->view('workout'); 
    }

和輸出

Array 
(
    [image] => Array 
     (
      [name] => green_planet-HD.jpg 
      [type] => image/jpeg 
      [tmp_name] => /opt/lampp/temp/php5ZSOdU 
      [error] => 0 
      [size] => 925133 
     ) 

)

來源

2017-05-18 14:15:53 Nobita

試試這個，它會幫助你。

$(document).on('submit', 'yourformId', function (event) { 
    event.stopPropagation(); 
    event.preventDefault(); 
    var data = new FormData($(this)[0]); 


    if (xhr && xhr.readyState !== 400 && xhr.status !== 200) { 
     xhr.abort(); 
    } 

    var xhr = $.ajax({ 
     url: "urltoUpload", 
     method: "POST", 
     cache: false, 
     data: data, 
     contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+) 
     processData: false, // NEEDED, DON'T OMIT THIS 
     // dataType: 'json', 
     statusCode: { 
      404: function() { 
       alert("status message") 
      }, 
      500: function() { 
       alert("server down"); 
      } 
     }, 
     beforeSend: function (jqXHR, setting) { 
      if (setting.status !== 200) { 
       console.log("You can put here") 
      } 
     }, 
     error: function (jaXHR, textStatus, errorThrown) { 
      // Now it will get parse error because dataType is json and response is html 
      // console.log(errorThrown); 
     }, 
     success: function (data, textStatus, jqXHR) { 
      console.log(data); 

      if (typeof data.error === 'undefined') { 
       // Success so call function to process the form 
       console.log('SUCCESS: ' + data.success); 
      } 
      else { 
       // Handle errors here 
       console.log('ERRORS: ' + data.error); 
      } 
     }, 
     complete: function (jqXHE, textStatus) { 
      document.body.innerHTML = "dfafsaf"; 
     } 

    }); 
});

在你控制器，你可以使用

dd($request->all());

您肯定！

來源

2017-07-04 19:06:21

FORMDATA是空的 - laravel 5.4

回答

相關問題