在Laravel 8中用Dropzone拖拽上传文件Dropzone是一个Javascript插件，提供拖放文件和图像预

Dropzone是一个Javascript插件，提供拖放文件和图像预览。它不依赖于外部JavaScript库，如-jQuery。

它很容易添加到页面上。

在本教程中，我将展示如何在Laravel 8中使用Dropzone上传文件。

Drag and Drop file upload with Dropzone in Laravel 8

内容

1.下载

从这里下载Dropzone库
将下载的文件解压到public/ 文件夹。

2.控制器

创建PageController 控制器。

php artisan make:controller PageController

打开app/Http/Controllers/PageController.php 文件。
创建两个方法 -
- **index -**加载index 视图。
- **uploadFile -**此方法用于上传Dropzone的选定文件。

定义文件的有效性。我把最大的文件大小设置为2MB（2048 Kb）。

**注意 -**文件验证与初始化Dropzone时定义的相同。

如果文件没有被验证，那么将0 到$data['success'] ，验证响应到$data['error'] 。

如果文件被成功验证，然后上传文件到"files" 位置。将1 赋给$data['success'] ，将Uploaded Successfully! 赋给$data['message'] 。

以JSON格式返回$data 数组。

完成的代码

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;

class PageController extends Controller {

     public function index(){
          return view('index');
     }

     public function uploadFile(Request $request){

          $data = array();

          $validator = Validator::make($request->all(), [
               'file' => 'required|mimes:png,jpg,jpeg,pdf|max:2048'
          ]);

          if ($validator->fails()) {
 
              $data['success'] = 0;
              $data['error'] = $validator->errors()->first('file');// Error response

          }else{
               if($request->file('file')) {

                   $file = $request->file('file');
                   $filename = time().'_'.$file->getClientOriginalName();

                    // File upload location
                    $location = 'files';

                    // Upload file
                    $file->move($location,$filename);

                    // Response
                    $data['success'] = 1;
                    $data['message'] = 'Uploaded Successfully!';

               }else{
                     // Response
                     $data['success'] = 0;
                     $data['message'] = 'File not uploaded.'; 
               }
          }

           return response()->json($data);
     }
}

3.路线

打开routes/web.php 文件。
定义2个路由 -

use App\Http\Controllers\PageController;

Route::get('/', [PageController::class, 'index']);
Route::post('/uploadFile', [PageController::class, 'uploadFile'])->name('uploadFile');

第二条路线用于上传Dropzone文件。

4.查看

在resources/views/ 文件夹中创建index.blade.php 文件。

在<meta > 标签中存储CSRF令牌，并包括Dropzone库。

Dropzone容器

创建一个<form action="{{route('uploadFile')}}" class='dropzone' > 。

脚本

从<meta > 标签读取CSRF令牌，并分配给CSRF_TOKEN 变量。
禁用Dropzone autoDiscover -Dropzone.autoDiscover = false 并在<form > 中初始化Dropzone。
设置最大上传文件大小为2MB和有效文件扩展名 - ".jpeg, .jpg, .png, .pdf"。
使用sending 事件发送CSRF令牌 -formData.append("_token", CSRF_TOKEN); 。
使用success 事件检查返回响应。
如果response.status == 0 ，意味着文件没有被上传。使用alert() 显示错误信息。

完成的代码

<!DOCTYPE html>
<html>
<head>
      <title>Drag and Drop file upload with Dropzone in Laravel 8</title>

      <!-- Meta -->
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta charset="utf-8">
      <meta name="csrf-token" content="{{ csrf_token() }}">

      <!-- CSS -->
     <link rel="stylesheet" type="text/css" href="{{asset('dropzone/dist/min/dropzone.min.css')}}">

      <!-- JS -->
      <script src="{{asset('dropzone/dist/min/dropzone.min.js')}}" type="text/javascript"></script>

</head>
<body>

       <div class='content'>
              <!-- Dropzone -->
             <form action="{{route('uploadFile')}}" class='dropzone' ></form> 
       </div>

       <!-- Script -->
       <script>
       var CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').getAttribute("content");

       Dropzone.autoDiscover = false;
       var myDropzone = new Dropzone(".dropzone",{ 
            maxFilesize: 2, // 2 mb
            acceptedFiles: ".jpeg,.jpg,.png,.pdf",
       });
       myDropzone.on("sending", function(file, xhr, formData) {
            formData.append("_token", CSRF_TOKEN);
       }); 
       myDropzone.on("success", function(file, response) {

            if(response.success == 0){ // Error
                  alert(response.error);
            }

       });
       </script>

</body>
</html>

5.输出

查看输出

6.总结

你可以用它来替代HTML文件元素或允许拖放文件上传。

Dropzone容器只显示图像预览。

你可以查看这个教程来改变非图片文件的缩略图。

如果你觉得这个教程有帮助，那么别忘了分享。

在Laravel 8中用Dropzone拖拽上传文件

内容

1.下 载

2.控 制器

3.路 线

4.查 看

5.输 出

6.总 结

相关帖子。