zazoomauro/symfony2-file-uploader-bundle

关于该软件包的最新版本（dev-master）没有可用的许可信息。

为 Symfony2 提供多文件上传，使用 BlueImp 上传器。同时也能缩放上传的图片

维护者

详细信息

github.com/zazoomauro/symfony2-file-uploader-bundle

源代码

安装: 52

依赖者: 0

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 87

语言:JavaScript

dev-master 2013-06-12 19:19 UTC

Requires

Unknown License 15bf565cade2f14d1eda61f18810e6df42ea5581

  • my-wardrobe <sysadmin.woop@my-wardrobe.com>

This package is not auto-updated.

Last update: 2024-09-23 14:09:19 UTC

README

简介

此软件包基于 [BlueImp jQuery 文件上传器](https://github.com/blueimp/jQuery-File-Upload/) 软件包提供多文件上传功能。在兼容浏览器中，完全支持拖放和选择多个文件。我们选择 BlueImp 是因为它具有出色的前后兼容性。

由于 BlueImp 提供的现有 PHP 上传器类已经非常优秀，并且自带许多优秀功能，因此此软件包只是一个相当薄的包装。我们提供了一种将其集成到 Symfony 2 项目的途径。

上传器将文件发送到您指定的文件夹。如果该文件夹已包含文件，则它们将与新文件并排显示，作为可以删除的现有文件。

该软件包可以自动将图片缩放到您指定的尺寸。提供的同步方法可以创建在表单中，其中附加的文件遵守“保存”和“取消”操作。

关于 Internet Explorer 的说明

10 版本之前的 Internet Explorer 不支持多文件上传。但是 IE 用户将能够一次添加一个文件，并且仍然能够创建一个附加文件的集合。

要求

  • Symfony2
  • jQuery
  • jQuery UI
  • Underscore

安装

  1. 将以下行添加到您的 Symfony2 依赖文件中

    [FileUploaderBundle] git=http://github.com/punkave/symfony2-file-uploader-bundle.git target=/bundles/PunkAve/FileUploaderBundle

  2. 使用以下行修改您的 AppKernel

    new PunkAve\FileUploaderBundle\PunkAveFileUploaderBundle(),

  3. 如果您还没有，请将以下行添加到您的 autoload.php 文件中

    'PunkAve' => DIR.'/../vendor/bundles',

  4. 安装您的供应商

    bin/vendors install

用法

您的页面必须包含 Underscore 模板以渲染文件列表和上传器。您可以使用我们的模板如下所示

{# Underscore templates for the uploader #}
{% include "PunkAveFileUploaderBundle:Default:templates.html.twig" %}

这足以在 body 的任何位置执行。如果您愿意，可以复制并修改 templates.html.twig，并将其包含在您自己的目录中。只需不要删除 data-* 属性。其余的标记由您自己完成。

在编辑操作中

假设您在控制器中有一个 editAction() 方法。您有一个表单，您想在其中包含一个附加文件列表，就像表单中的其他字段一样：您可以添加更多，您也可以删除现有文件，但除非用户点击“保存”，否则不会发生永久性操作。

FileUploader 服务需要一个唯一的文件夹名来存储与给定对象关联的文件。为了实现这一点，对于新对象和现有对象，我们建议您遵循“编辑ID模式”，在该模式中，表单在整个生命周期中（包括必要时多次验证）被分配一个唯一的随机“编辑ID”。这使我们能够管理尚未拥有自己ID的新对象的文件上传。

此代码在表单第一次遍历时创建editId，并同步现有对象中附加的现有文件（如果有）。from_folder和to_folder对象指定了存储附加文件的子目录。稍后我们将探讨如何确定这些文件夹的父目录。

（获取$posting并验证用户是否有权编辑该帖子由您自行处理。）

$request = $this->getRequest();

$editId = $this->getRequest()->get('editId');
if (!preg_match('/^\d+$/', $editId))
{
    $editId = sprintf('%09d', mt_rand(0, 1999999999));
    if ($posting->getId())
    {
        $this->get('punk_ave.file_uploader')->syncFiles(
            array('from_folder' => 'attachments/' . $posting->getId(), 
              'to_folder' => 'tmp/attachments/' . $editId,
              'create_to_folder' => true));
    }
}

如果用户在尝试完成操作（例如，表单验证错误）时遇到验证错误，您希望再次显示相同的文件列表。因此，请使用getFiles方法获取现有文件的列表。确保将此列表传递给您的模板。

$existingFiles = $this->get('punk_ave.file_uploader')->getFiles(array('folder' => 'tmp/attachments/' . $editId));

（请注意，您生成的editId应该是高度随机的，以防止用户控制彼此的附件。）

当用户保存表单并且您刚刚持久化帖子对象时，您还应该将与editId关联的临时文件夹中的文件同步回与帖子id关联的永久文件夹。由于我们已经完成了临时文件夹，我们要求文件上传服务删除该文件夹。我们还要求服务在必要时创建目标文件夹。

$fileUploader = $this->get('punk_ave.file_uploader');
$fileUploader->syncFiles(
    array('from_folder' => '/tmp/attachments/' . $editId,
    'to_folder' => '/attachments/' . $posting->getId(),
    'remove_from_folder' => true,
    'create_to_folder' => true));

稍后您可以轻松地获取附加到对象的所有文件名称列表

$files = $fileUploader->getFiles(array('folder' => 'attachments/' . $posting->getId()));

然而，访问文件系统会有一定的性能开销。您会发现将附件列表保存在Doctrine表中更为高效，尤其是如果您想在列表视图中包括第一个附件。只需使用getFiles获取文件名列表，并根据需要将其镜像到数据库中。

在您的布局中

要使必要的JavaScript通过Assetic可用（请注意，您必须提供jQuery、jQuery UI和Underscore）

{% javascripts 
    '@MyBundle/Resources/public/js/jquery-1.7.2.min.js'
    '@MyBundle/Resources/public/js/jquery-ui-1.8.22.custom.min.js'
    '@MyBundle/Resources/public/js/underscore-min.js'
    '@PunkAveFileUploaderBundle/Resources/public/js/jquery.fileupload.js'
    '@PunkAveFileUploaderBundle/Resources/public/js/FileUploader.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

在编辑模板中

假设有一个与编辑操作关联的edit.html.twig模板。这里可能的样子。请注意，在您的操作中的渲染调用会传递帖子对象、editId、现有Files数组以及isNew标志

{% extends "MyBundle:Default:layout.html.twig" %}

{% block body %}

{# Underscore templates for the uploader #}
{% include "PunkAveFileUploaderBundle:Default:templates.html.twig" %}

<form class="edit-form" action="{{ path('edit', { id: posting.id, editId: editId }) }}" method="post" {{ form_enctype(form) }}>
    {{ form_widget(form) }}

    {# Hydrated by javascript #}
    <div class="file-uploader"></div>

    <button class="btn btn-primary" type="submit">{{ isNew ? "Save New Listing" : "Save Changes" }}</button> 
    <a class="btn" href="{{ cancel }}">Cancel</a>
    {% if not isNew %}
        <a class="btn btn-danger" href="{{ path('delete', { id: posting.id } ) }}">Delete</a>
    {% endif %}

</form>

<script type="text/javascript">

// Enable the file uploader

$(function() {
    new PunkAveFileUploader({ 
        'uploadUrl': {{ path('upload', { editId: editId }) | json_encode | raw }},
        'viewUrl': {{ '/uploads/tmp/attachments/' ~ editId | json_encode | raw }},
        'el': '.file-uploader',
        'existingFiles': {{ existingFiles | json_encode | raw }},
        'delaySubmitWhileUploading': '.edit-form'
    });
});
</script>
{% endblock %}

进度显示

在template.html.twig中有一个简单的旋转器。如果您选择提供自己的Underscore模板，可以替换它。只需确保您有自己的元素，并具有data-spinner="1"属性。

如果您使用template.html.twig，请注意，您必须按照常规方式发布您的资产，以便旋转器图像可用

php app/console assets:install web/

作为替代，您可以在间隔定时器上编写自己的代码，该定时器检查PunkAveFileUploader对象的uploading属性是否当前设置为true，并基于此显示旋转器。

延迟表单提交直到上传完成

如果上传仍在进行中，让用户提交包含文件上传的表单不是个好主意。您可以轻松地通过在上传PunkAveFileUploader JavaScript对象时指定'delaySubmitWhileUploading'选项来阻止此操作。

'delaySubmitWhileUploading': '.edit-form'

或者，您可以在任何时间检查使用new PunkAveFileUploader(...)创建的对象的uploading属性。如果正在上传，它将是true。现有的delaySubmitWhileUploading实现依赖于这一点。

在上传操作中

除了表单的常规编辑操作之外，还必须有一个上传操作来处理文件上传。此操作将调用服务的handleFileUpload方法，将任务传递给BlueImp的UploadHandler类。由于该类直接在PHP中实现了整个REST响应，因此该方法不返回。

以下是上传操作

/**
 *
 * @Route("/upload", name="upload")
 * @Template()
 */
public function uploadAction()
{
    $editId = $this->getRequest()->get('editId');
    if (!preg_match('/^\d+$/', $editId))
    {
        throw new Exception("Bad edit id");
    }

    $this->get('punk_ave.file_uploader')->handleFileUpload(array('folder' => 'tmp/attachments/' . $editId));
}

此单一操作实际上实现了一个完整的REST API，其中BlueImp UploadHandler类负责上传以及删除文件。

同样，handleFileUpload不返回，因为响应是由BlueImp的UploadHandler类以原生PHP生成的。

设置允许的文件类型

您可以通过在handleFileUpload方法或parameters.yml中指定，来指定自定义文件类型以从默认类型（在Resources/config/services.yml中定义）中分离。

在handleFileUpload中

$this->get('punk_ave.file_uploader')->handleFileUpload(array(
    'folder' => 'tmp/attachments/' . $editId,
    'allowed_extensions' => array('zip', 'rar', 'tar')
));

在这种情况下，FileUploader服务将合并默认扩展名和提供的扩展名，并制作一个单一的正则表达式。使用正则表达式字符可能会导致错误。

parameters.yml: 如果您安装了Symfony标准版，您可以在app/config/parameters.yml中指定它们。

file_uploader.allowed_extensions:
    - zip
    - rar
    - tar

这样做将覆盖默认扩展名而不是添加它们！

删除文件

迟早帖子会被删除，您希望所有附件也都被删除。

您可以这样做：

$this->get('punk_ave.file_uploader')->removeFiles(array('folder' => 'attachments/' . $posting->getId()));

您可能希望在管理类或Doctrine事件监听器中这样做，但这不是我们的部门。

删除临时文件

如果您选择遵循我们的editId模式，您将希望定期清除web/uploads/tmp中超过一定年龄的内容。人们经常离开网站，所以并不是每个人都会点击您精心提供的“取消”操作，该操作基于editId模式调用removeFiles()。

请考虑将其作为每晚运行的cron作业安装此shell脚本。此shell脚本删除超过一天旧的文件，然后删除空文件夹

#!/bin/sh
find /path/to/my/project/web/uploads/tmp -mtime +1 -type f -delete
find /path/to/my/project/web/uploads/tmp -mindepth 1 -type d -empty -delete

（由于第二个命令不是递归的，父文件夹可能会多留一天，但它们将在第二天被删除。）

配置参数

请参阅此捆绑包中的Resources/config/services.yml。您可以轻松地决定上传的父文件夹是什么，可以接受哪些文件扩展名，以及您希望将图像文件自动缩放到哪些大小。

如上所示，from_folder、to_folder和folder选项都是在处理文件时追加到file_uploader.file_base_path之后的。

如果file_uploader.file_base_path设置为以下内容（默认设置）

file_uploader.file_base_path: "%kernel.root_dir%/../web/uploads"

并且当调用handleFileUpload时将folder选项设置为attachments/5，那么上传的文件将到达

/root/of/your/project/web/uploads/attachments/5/originals

如果此帖子的唯一附件是botfly.jpg，并且您已经为file_uploader.sizes选项配置了一个或多个图像大小（默认情况下我们提供了一些有用的标准大小），那么您将看到

/root/of/your/project/web/uploads/photos/5/originals/botfly.jpg
/root/of/your/project/web/uploads/photos/5/thumbnail/botfly.jpg
/root/of/your/project/web/uploads/photos/5/medium/botfly.jpg
/root/of/your/project/web/uploads/photos/5/large/botfly.jpg

因此，所有这些都可以通过以下URL轻松访问

/uploads/photos/5/originals/botfly.jpg

等等。

尽可能保留上传文件的原始名称和文件扩展名，同时不引入安全风险。

限制上传数量

您可以通过设置max_no_of_files属性来限制上传文件的数量。您可以在parameters.yml中这样设置

parameters:
  file_uploader.max_number_of_files: 4

您可能想要为此情况添加一个错误处理器。在初始化PunkAveFileUploader的模板中设置errorCallback

// Enable the file uploader
$(function() {
  new PunkAveFileUploader({    
    // ... other required options,

    'errorCallback': function(errorObj) {
      if (errorObj.error == 'maxNumberOfFiles') {
        alert("Maximum uploaded files exceeded!");
      }
    }
  });
});

限制

此捆绑包通过glob()函数访问文件系统。它与S3流包装器不兼容。

如果您的附件非常大，同步文件以遵循editId模式可能不太合适。在这种情况下，不要使用editId模式。一个替代方案是立即在数据库中创建对象，并在标记为实时之前不在列表视图中显示它们。这样，您的编辑操作可以使用对象的永久ID作为folder选项的一部分，而无需同步任何内容。在这种情况下，您可能需要在表单下方移动附件列表，以提示用户没有“取消”这些操作的情况。

注意

该上传程序已使用Bootstrap约定进行样式化。如果您在项目中使用了Bootstrap，上传程序应该看起来相当美观。

“选择文件”按钮允许多选以及拖放。