README

为 ATK14 应用程序提供异步文件上传功能的一组特性。

AsyncFileField 是内置 FileField 的优秀替代品。

安装

cd path/to/your/project/
composer require atk14/async-file-field

ln -s ../../../vendor/atk14/async-file-field/src/app/controllers/api/temporary_file_uploads_controller.php app/controllers/api/
ln -s ../../../vendor/atk14/async-file-field/src/app/forms/api/temporary_file_uploads app/forms/api/
ln -s ../../vendor/atk14/async-file-field/src/app/models/temporary_file_upload.php app/models/
ln -s ../../vendor/atk14/async-file-field/src/app/fields/async_file_field.php app/fields/
ln -s ../../vendor/atk14/async-file-field/src/app/widgets/async_file_input.php app/widgets/
ln -s ../../../vendor/atk14/async-file-field/src/public/scripts/utils/async_file_upload.v2.js public/scripts/utils/async_file_upload.js
ln -s ../../../vendor/atk14/async-file-field/src/public/styles/shared/_async_file_input.v2.scss public/styles/shared/_async_file_input.scss

将迁移复制到合适的文件名中，并将迁移脚本应用于您的项目

cp vendor/atk14/async-file-field/src/db/migrations/0019_temporary_file_uploads.sql db/migrations/
./scripts/migrate

将 async_file_upload.js 包含到您的 gulpfile 中。

var applicationScripts = [
       // ...,
       "public/scripts/utils/async_file_upload.js",
       "public/scripts/application.js"
];

在 public/scripts/application.js（或 public/admin/scripts/application.js 等），全局或针对特定操作，您可以这样初始化异步文件上传

// globally
common: {
  init: function() {
    // ...
    UTILS.async_file_upload.init();
  }
}

// specific action
articles: {
  create_new: function() {
    UTILS.async_file_upload.init();
  }
}

将 AsyncFileField 的样式包含到 public/styles/application.scss（或 public/admin/styles/application.scss 等）中

@import "shared/async_file_input";

最后，在表单中，您可以用 AsyncFileField 替换 FileField。

<?php
class CreateNewForm extends ApplicationForm {
    function set_up(){
        $this->add_field("image", new AsyncFileField([
          "label" => "Image",
          "allowed_mime_types" => ["image/jpg","image/png"],
        ]));
    }
}

分块文件上传

文件以 1MB 分块上传到服务器。上传文件的最大总大小可以在常量 TEMPORARY_FILE_UPLOADS_MAX_FILESIZE 中定义。默认为 512MB。

过时文件删除

过时文件将在常量 TEMPORARY_FILE_UPLOADS_MAX_AGE 指定的时间后自动删除。默认时间为 2 小时。

配置

在 config/settings.php 中，可以定义这些常量

define("TEMPORARY_FILE_UPLOADS_ENABLED",true); // Temporary file uploading can be disabled here
define("TEMPORARY_FILE_UPLOADS_DIRECTORY",__DIR__ . "/../tmp/temporary_file_uploads/");
define("TEMPORARY_FILE_UPLOADS_MAX_FILESIZE",512 * 1024 * 1024); // 512MB
define("TEMPORARY_FILE_UPLOADS_MAX_AGE", 2 * 60 * 60); // 2 hours

旧版使用

如果您使用 Bootstrap 3，可以在包中找到一个 less 文件。将其链接到您的项目中。

ln -s ../../../vendor/atk14/async-file-field/src/public/styles/shared/async_file_input.less public/styles/shared/

然后在您的 application.less 中使用该文件。

@import url( "./shared/async_file_input.less" );

如果您链接 async_file_upload.js 而不是 async_file_upload.v2.js，则需要 npm 包 blueimp-file-upload 和 jquery-ui-bundle。

需要使用 npm 安装这些包。

npm install --save jquery-ui-bundle blueimp-file-upload

然后将文件添加到您的 gulp 文件中。

var vendorScripts = [
     // ...,
     "node_modules/jquery-ui-bundle/jquery-ui.js",
     "node_modules/blueimp-file-upload/js/jquery.fileupload.js"
];

许可证

AsyncFileField 是免费软件，根据 MIT 许可证的条款发布 （https://open-source.org.cn/licenses/mit-license）