2017-05-18 7 views
3

Hallo Freunde,
Ich versuche, ein Bild mit Ajax in Laravel 5.4Formdata ist leer - Laravel 5.4

Ausgabe hochladen:
Formdata ist leer auf serverseitige

CODE:

Anzeigen:

<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 
    }); 
}); 

Strecke:

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

-Controller:

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']); 
     } 
    } 
} 

Rückkehr Antwort von Server-Seite ist:

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

ich sehen kann, nur Token zurückgibt, aber keine Daten von hochgeladenen Bildes. Wenn ich Formular ohne Ajax einreiche, dann funktioniert es gut.

Ausgabe vorgelegt, wenn sie ohne Verwendung von AJAX (dies ist die Ausgabe ich erwarte auch Ajax eingereicht haben):

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" 

} ]

Kann jemand mir helfen, dieses Problem zu lösen?

** Vielen Dank im Voraus ...

+0

Überprüfen Sie die Daten, die von der FormData-Funktion zurückgegeben werden, protokollieren Sie diese in der Konsole und sehen Sie, ob sie sich dort anmelden. – Webinion

+0

@PandhiBhaumik Danke für Ihren Kommentar. Mit Hilfe des Konsolenprotokolls können wir keine formdata prüfen. Wenn wir dies tun, wird ein leeres Objekt zurückgegeben. Hier finden Sie weitere Erläuterungen zum Überprüfen von formdata [link] (http://stackoverflow.com/questions/17066875/how-to-inspect-formdata). Ich habe keinen Fehler vom clientseitigen Skript gefunden. – Himakar

+0

Also, ich hatte ein richtiges Problem mit der Client-Seite? – Webinion

Antwort

-1

Für Ihre Referenz

View file:

<!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> 

und mein Controller

public function workout() 
    { 

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

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

und Ausgang ist

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

) 
0

Versuchen Sie dies, es wird Ihnen helfen.

$(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"; 
     } 

    }); 
}); 

In Ihrem Controller Sie

dd($request->all()); 

für Ihre sicher nutzen können !!