laravel and ajax implement file upload function
As we all know, early XMLHttpRequest did not support file upload, and third-party js plug-ins or flash were generally used. Now you can use the FormData object of XMLHttpRequest Level 2 to achieve binary file upload. I happened to encounter this requirement at work recently, so this article is Let me summarize the implementation method for you. Not much to say, 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('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));
}Related recommendations:
How to implement common file upload functions on php web pages、
PHP File upload function implements code sharing
Using JQuery to implement asynchronous form submission and file upload functions
The above is the detailed content of laravel and ajax implement file upload function. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to get the return code when email sending fails in Laravel?
Apr 01, 2025 pm 02:45 PM
Method for obtaining the return code when Laravel email sending fails. When using Laravel to develop applications, you often encounter situations where you need to send verification codes. And in reality...
How to implement the custom table function of clicking to add data in dcat admin?
Apr 01, 2025 am 07:09 AM
How to implement the table function of custom click to add data in dcatadmin (laravel-admin) When using dcat...
Laravel Redis connection sharing: Why does the select method affect other connections?
Apr 01, 2025 am 07:45 AM
The impact of sharing of Redis connections in Laravel framework and select methods When using Laravel framework and Redis, developers may encounter a problem: through configuration...
Laravel multi-tenant extension stancl/tenancy: How to customize the host address of a tenant database connection?
Apr 01, 2025 am 09:09 AM
Custom tenant database connection in Laravel multi-tenant extension package stancl/tenancy When building multi-tenant applications using Laravel multi-tenant extension package stancl/tenancy,...
Laravel Eloquent ORM in Bangla partial model search)
Apr 08, 2025 pm 02:06 PM
LaravelEloquent Model Retrieval: Easily obtaining database data EloquentORM provides a concise and easy-to-understand way to operate the database. This article will introduce various Eloquent model search techniques in detail to help you obtain data from the database efficiently. 1. Get all records. Use the all() method to get all records in the database table: useApp\Models\Post;$posts=Post::all(); This will return a collection. You can access data using foreach loop or other collection methods: foreach($postsas$post){echo$post->
How to effectively check the validity of Redis connections in Laravel6 project?
Apr 01, 2025 pm 02:00 PM
How to check the validity of Redis connections in Laravel6 projects is a common problem, especially when projects rely on Redis for business processing. The following is...
Laravel database migration encounters duplicate class definition: How to resolve duplicate generation of migration files and class name conflicts?
Apr 01, 2025 pm 12:21 PM
A problem of duplicate class definition during Laravel database migration occurs. When using the Laravel framework for database migration, developers may encounter "classes have been used...
Laravel Introduction Example
Apr 18, 2025 pm 12:45 PM
Laravel is a PHP framework for easy building of web applications. It provides a range of powerful features including: Installation: Install the Laravel CLI globally with Composer and create applications in the project directory. Routing: Define the relationship between the URL and the handler in routes/web.php. View: Create a view in resources/views to render the application's interface. Database Integration: Provides out-of-the-box integration with databases such as MySQL and uses migration to create and modify tables. Model and Controller: The model represents the database entity and the controller processes HTTP requests.
