Detailed explanation of how laravel and ajax implement file upload function

黄舟
Release: 2023-03-15 07:00:01
Original
1985 people have browsed it

The project I am working on recently is based on Laravel development and requires Ajax upload. I checked some information and sorted out the available methods myself. The following article mainly introduces you to the relevant information about using laravel+ajax to implement the file upload function. Friends in need can refer to it. Let’s take a look together.

Preface

As we all know, the early XMLHttpRequest did not support file upload. Generally, third-party js plug-ins or flash were used. Now you can use XMLHttpRequest Level 2's FormData object implements binary file upload. I happened to encounter this requirement at work recently, so this article will summarize the implementation method for you. Without further ado, let's take a look at the detailed introduction.

Sample code


##

@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(&#39;photo&#39;)}}",
   type: &#39;POST&#39;, 
   data: formData, 
   contentType: false, 
   processData: false, 
   success: function (returndata) { 
    console.log(returndata); 
   }, 
   error: function (returndata) { 
    console.log(returndata); 
   } 
  }); 
} 

</script>

@endsection
Copy after login


 //生成路径,图片存储
  $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(&#39;uploads&#39;)->put($src,file_get_contents($realPath));
  }
Copy after login

Summary

The above is the detailed content of Detailed explanation of how laravel and ajax implement file upload function. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template