在CodeIgniter 4中用Dropzone拖拽上传文件的详细指南

Dropzone使文件上传实施更容易。它允许通过直接在Dropzone容器上拖放来上传文件。

在图像文件上传后显示一个预览。

在本教程中，我展示了如何在CodeIgniter 4中使用Dropzone.js创建拖放文件上传。

下载

---

内容

1. 启用CSRF
2. 路由
3. 控制器
4. 查看
5. 运行
6. 输出
7. 结论

---

1.启 用CSRF

• 打开.env 文件。
• 从security.tokenName,security.headerName,security.cookieName,security.expires, 和security.regenerate 的开头删除#。
• 使用security.tokenName 读取CSRF哈希值，你可以用任何其他值来更新它：

# security.csrfProtection = 'cookie'
# security.tokenRandomize = false
security.tokenName = 'csrf_token_name'
security.headerName = 'X-CSRF-TOKEN'
security.cookieName = 'csrf_cookie_name'
security.expires = 7200
security.regenerate = true
# security.redirect = true
# security.samesite = 'Lax'

• 打开app/Config/Filters.php 文件。
• 取消'csrf' 中的注释，如果有注释的话，在'before'：

public $globals = [
    'before' => [
        // 'honeypot',
        'csrf',
        // 'invalidchars',
     ],
     'after' => [
        'toolbar',
        // 'honeypot',
        // 'secureheaders',
     ],
];

---

2.路 线

• 打开app/Config/Routes.php 文件。
• 定义2个路由 -
  • / -显示文件上传视图
  • page/fileUpload -用来上传文件

完成的代码

$routes->get('/', 'PageController::index');
$routes->post('page/fileUpload', 'PageController::fileUpload');

---

3.控 制器

• 创建PageController 控制器 -

php spark make:controller PageController

• 打开app/Controllers/PageController.php 文件。
• 创建2个方法 -
  • index() -加载索引视图。
  • fileUpload() -这个方法用于上传Dropzone的选定文件。

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

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

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

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

以JSON格式返回$data 数组。

完成的代码

<?php 
namespace App\Controllers;
use App\Controllers\BaseController;

class PageController extends BaseController{

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

   public function fileUpload(){

      $data = array();

      // Read new token and assign to $data['token']
      $data['token'] = csrf_hash();

      ## Validation
      $validation = \Config\Services::validation();

      $input = $validation->setRules([
         'file' => 'uploaded[file]|max_size[file,2048]|ext_in[file,jpeg,jpg,png,pdf],'
      ]);

      if ($validation->withRequest($this->request)->run() == FALSE){

          $data['success'] = 0;
          $data['error'] = $validation->getError('file');// Error response

      }else{

          if($file = $this->request->getFile('file')) {
             if ($file->isValid() && ! $file->hasMoved()) {
                // Get file name and extension
                $name = $file->getName();
                $ext = $file->getClientExtension();

                // Get random file name
                $newName = $file->getRandomName();

                // Store file in public/uploads/ folder
                $file->move('../public/uploads', $newName);

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

             }else{
                // Response
                $data['success'] = 2;
                $data['message'] = 'File not uploaded.'; 
             }
          }else{
             // Response
             $data['success'] = 2;
             $data['message'] = 'File not uploaded.';
          }
      }
      return $this->response->setJSON($data);

   }

}

---

4.查 看

在app/Views/ 中创建index.php 文件。

包括Dropzone和jQuery库。

你可以从这里下载Dropzone，或者你可以使用CDN ------：

<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

创建一个隐藏的元素，在name 属性中存储在.env 文件中指定的CSRF令牌名称，在value 属性中存储CSRF哈希：

<input type="hidden" class="txt_csrfname" name="<?= csrf_token() ?>" value="<?= csrf_hash() ?>" />

创建<form action="<?=site_url('page/fileUpload')?>", class='dropzone' ></form> 来初始化Dropzone。

脚本

• 禁用Dropzone autoDiscover -Dropzone.autoDiscover = false 并在class="dropzone" 上初始化Dropzone。
• 设置最大上传文件大小为2MB和有效文件扩展名 - ".jpeg, .jpg, .png, .pdf"。
• 用Dropzonesending 事件发送CSRF令牌 -formData.append(csrfName, csrfHash); 。
• 使用success 事件更新令牌哈希，并检查返回响应。
• 如果response.status == 0 表示有一个错误，如果response.status == 2 表示文件没有被上传。使用alert() 显示错误信息。

完成的代码

<!doctype html>
<html>
<head>
   <title>Drag and Drop file upload with Dropzone in CodeIgniter 4</title>

   <!-- CSS -->
   <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />

   <!-- Script -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

</head>
<body>

   <!-- CSRF token --> 
   <input type="hidden" class="txt_csrfname" name="<?= csrf_token() ?>" value="<?= csrf_hash() ?>" />

   <div class='content'>
      <!-- Dropzone -->
      <form action="<?=site_url('page/fileUpload')?>", class='dropzone' ></form> 
   </div>

   <!-- Script -->
   <script>

   Dropzone.autoDiscover = false;
   var myDropzone = new Dropzone(".dropzone",{ 
      maxFilesize: 2, // 2 mb
      acceptedFiles: ".jpeg,.jpg,.png,.pdf",
   });
   myDropzone.on("sending", function(file, xhr, formData) {
      // CSRF Hash
      var csrfName = $('.txt_csrfname').attr('name'); // CSRF Token name
      var csrfHash = $('.txt_csrfname').val(); // CSRF hash

      formData.append(csrfName, csrfHash);
   }); 
   myDropzone.on("success", function(file, response) {
      $('.txt_csrfname').val(response.token);
      if(response.success == 0){ // Error
         alert(response.error);
      }
      if(response.success == 2){
         alert(response.message);
      }

   });
   </script>

</body>
</html>

---

5.运 行

• 使用命令提示符（如果你在Windows上）或终端（如果你在Mac或Linux上）导航到该项目，然后
• 执行 "php spark serve "命令。

php spark serve

• 在网络浏览器中运行http://localhost:8080 。

---

6.输 出

查看输出

---

7.总 结

在上传文件前再次验证总是更好的。根据你的要求更新Dropzone的验证。

如果CSRF在你的项目中被禁用，请删除CSRF令牌步骤。

查看本教程，了解如何在Dropzone的页面重新加载后显示上传的文件。