如何上传带有进度条的文件？

我们将学习带有进度条的 laravel 上传图片。

您可以将此示例与 laravel 6、laravel 7、laravel 8 和 laravel 9 版本一起使用。

正确按照步骤操作，一切都会正常进行

This step is not required; however, if you have not created the laravel app, then you may go ahead and execute the below command:

 作曲家创建项目 laravel/laravel 进度条

In first step, we will add new two routes. One for display view and we will write jquery code in view file. In Second step, we will create POST route for file upload.

路线/web.php

 <?php **利用** 照亮\支持\外墙\路线； **利用** 应用程序\Http\控制器\文件控制器； /* |------------------------------------------------- ------------------------- |网络路由 |------------------------------------------------- ------------------------- | |您可以在此处为您的应用程序注册网络路由。这些 |路由由 RouteServiceProvider 在一个组内加载 |包含“web”中间件组。现在创造一些伟大的东西！ | */ 路线：：控制器（文件控制器：： **班级** )-> **团体** ( **功能** (){ 路线：： **得到** ('文件上传', '索引'); Route::post('file-upload', 'store')->name('file.upload'); });

In second step, we need to create FileController controller with index() and store(). you need to create “files” folder in public folder. we will store all files on that folder. just create new controller and put bellow code on it:

应用程序/Http/Controllers/FileController.php

 <?php **命名空间** 应用\Http\控制器； **利用** 照亮\Http\请求； **班级** 文件控制器 **延伸** 控制器 { /** * 显示应用程序仪表板。 * * @return \Illuminate\Http\Response */ **上市** **功能** 指数（） { **返回** 视图（'文件上传'）； } /** * 显示应用程序仪表板。 * * @return \Illuminate\Http\Response */ **上市** **功能** 商店（请求$请求） { $请求->验证（[ '文件' => '必需', ]); $fileName = time().'.'.request()->file->getClientOriginalExtension(); request()->file->move(public_path('files'), $fileName); **返回** response()->json(['success'=>'你已经成功上传文件。']); } }

In this Last step, we require to create fileUpload.blade.php file and we write code for jquery and show you with progress bar. So you have to simply add bellow code on following path:

资源/视图/fileUpload.blade.php

 <!DOCTYPE html> ** <html** **郎** ="{{ str_replace('_', '-', app()->getLocale()) }}"> ** <head>** ** <meta** **字符集** ="utf-8" ** >** ** <meta** **姓名** ="视口" **内容** =“宽度=设备宽度，初始比例= 1” ** >** ** <title>** Laravel Bootstrap 5 进度条示例 - ItSolutionStuff.com ** </title>** ** <link** **链接** ="https://cdn.jsdelivr.net/npm/[[email protected]](/cdn-cgi/l/email-protection)/dist/css/bootstrap.min.css" **相对** ="样式表" ** >** ** </head>** ** <body>** ** <div** **班级** ="集装箱 mt-5" **风格** ="最大宽度：900px" ** >** ** <div** **班级** ="alert alert-primary mb-4 text-center" ** >** ** <h2** **班级** ="显示-6" ** >** Laravel 文件上传与 Ajax 进度条示例 - ItSolutionStuff.com ** </h2>** ** </div>** ** <form** **ID** ="文件上传表单" **方法** ="发布" **行动** ="{{ 路由('file.upload') }}" **加密类型** ="多部分/表单数据" ** >** @csrf ** <div** **班级** ="表单组 mb-3" ** >** ** <input** **姓名** ="文件" **类型** ="文件" **班级** ="表单控制" ** >** ** </div>** ** <div** **班级** ="表单组" ** >** ** <div** **班级** ="进度" ** >** ** <div** **班级** ="进度条进度条条纹进度条动画 bg 成功" **角色** ="进度条" **咏叹调-valuenow** ="0" **咏叹调-valuemin** ="0" **咏叹调值最大值** ="100" **风格** ="宽度：0%" ** ></div>** ** </div>** ** </div>** ** <div** **班级** ="d-网格 mt-4" ** >** ** <input** **类型** ="提交" **价值** ="提交" **班级** ="btn btn-primary" ** >** ** </div>** ** </form>** ** </div>** ** <script** **源代码** ="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ** ></script>** ** <script** **源代码** ="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" ** ></script>** ** <script>** $( **功能** () { $(文档).ready( **功能** () { $('#fileUploadForm').ajaxForm({ 发送前： **功能** () { **曾是** 百分比 = '0'; }, 上传进度： **功能** （事件、位置、总数、完成百分比）{ **曾是** 百分比 = 完成百分比； $('.progress .progress-bar').css("宽度", 百分比+'%', **功能** () { **返回** $( **这个** ).attr("aria-valuenow", 百分比) + "%"; }) }, 完全的： **功能** (xr) { console.log('文件已上传'); } }); }); }); ** </script>** ** </body>** ** </html>**

现在，点击这个链接

http://localhost:8000/file-upload

或者

php工匠服务