Heim  >  Artikel  >  Backend-Entwicklung  >  Laravel und Ajax implementieren die Funktion zum Hochladen von Dateien

Laravel und Ajax implementieren die Funktion zum Hochladen von Dateien

小云云
小云云Original
2018-01-26 14:07:321507Durchsuche

Wie wir alle wissen, unterstützte das frühe XMLHttpRequest das Hochladen von Dateien nicht und es wurden im Allgemeinen JS-Plugins oder Flash von Drittanbietern verwendet. Jetzt können Sie das FormData-Objekt von XMLHttpRequest Level 2 verwenden, um das Hochladen von Binärdateien zu erreichen Da ich in letzter Zeit bei der Arbeit auf diese Anforderung gestoßen bin, möchte ich die Implementierungsmethode für Sie zusammenfassen. Schauen wir uns die detaillierte Einführung an.

Beispielcode

@extends('layouts.art')
@section('content')

<form class="form-horizontal" id="avatar"> 
   {{ csrf_field() }}
 <p class="form-group">
 <label for="inputEmail3" class="col-sm-2 control-label">名字</label>
 <p class="col-sm-8">
  <input type="title" class="form-control" id="title" name="title">
 </p>
 </p>


 <p class="form-group">
 <label for="inputEmail3" class="col-sm-2 control-label">头像</label>
 <p class="col-sm-8">
  <input type="file" class="form-control" id="title" name="photo">
 </p>
 </p>


 <p class="form-group">
 <p class="col-sm-offset-2 col-sm-10">
  <a class="btn btn-default" onclick="uploadInfo()">上传</a>
 </p>
 </p>
</form>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript"> 
function uploadInfo() { 
  var formData = new FormData($("#avatar")); 
  $.ajax({ 
   url: "{{url('photo')}}",
   type: 'POST', 
   data: formData, 
   contentType: false, 
   processData: false, 
   success: function (returndata) { 
    console.log(returndata); 
   }, 
   error: function (returndata) { 
    console.log(returndata); 
   } 
  }); 
} 

</script>

@endsection
 //生成路径,图片存储
  $ext = $request->photo->getClientOriginalExtension();
  $cover_path = "images/album/covers/" . time() . $ext; 
  $name = "photo".time();
  $src = "images/album/photos/". $name .".jpg";
  Image::make($request->photo)->save(public_path($src));*/

 //批量上传图片

  foreach ($request->photo as $key => $value) {
   //生成路径,图片存储
   $prefix = "photo".mt_rand(1,1000);
   $Origname = $value->getClientOriginalName();
   $name = $prefix.$Origname;
   $src = "images/album/photos/".$name;
   $realPath = $value->getRealPath();
   Storage::disk('uploads')->put($src,file_get_contents($realPath));
  }

Verwandte Empfehlungen:

So implementieren Sie allgemeine Datei-Upload-Funktionen in PHP-Webseiten,

PHP-Datei-Upload-Funktion realisiert Code-Sharing

Verwendung von JQuery zur Realisierung der asynchronen Übermittlungs- und Datei-Upload-Funktion des Formulars

Das obige ist der detaillierte Inhalt vonLaravel und Ajax implementieren die Funktion zum Hochladen von Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn