mylen/jquery-file-upload-bundle

用于 Symfony2 的多文件上传组件，基于 BlueImp 上传器。同时也能缩放上传的图片。

维护者

详细信息

github.com/mylen/jquery-file-upload-bundle

主页

源码

问题

安装量: 12,859

依赖者: 0

建议者: 0

安全性: 0

星标: 4

关注者: 5

分支: 5

语言:JavaScript

类型:symfony-bundle

2.1.1 2012-12-14 06:04 UTC

Requires

MIT c9d39a26b43fa07a0e713168cbf913dde30472c3

  • Thomas Boutell <tom.woop@punkave.com>
  • Wes John-Alder <wes.woop@punkave.com>
  • Alexandre Melard <alexandre.woop@melard.fr>

symfonyfilebundleuploadSymfony BundleImage transformuploadermultiple file uploadblueimpsymfony-2.0symfony-2.1

This package is not auto-updated.

Last update: 2024-09-28 13:09:20 UTC

README

This bundle is in work progress, do not use it now !!

JQueryFileUploadBundle

简介

这个库提供了一个用于 BlueImp jQuery 文件上传包的 symfony2 组件。[https://github.com/blueimp/jQuery-File-Upload/](BlueImp）的文档请见https://github.com/blueimp/jQuery-File-Upload/blob/master/README.md。

由于 BlueImp 提供的 PHP 上传器类已经非常优秀，所以我们只是提供了一个非常薄的包装，以便将其集成到 Symfony 2 项目中。

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

该组件可以自动将图片缩放至指定的尺寸。提供的方法可以实现创建表单，其中附加的文件可以遵循“保存”和“取消”操作。

关于 Internet Explorer 的说明

IE 10 之前的版本不支持多文件上传。但是，IE 用户仍然可以一次添加一个文件，并且仍然可以构建一个附件文件集合。

要求

  • Symfony2
  • jQuery
  • jQuery UI
  • Underscore

安装

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

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

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

    new BlueImp\JQueryFileUploadBundle\JQueryFileUploadBundle(),

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

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

  4. 安装您的供应商

    bin/vendors install

用法

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

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

您可以在 body 中的任何位置这样做。如果您想修改 templates.html.twig 并从您自己的目录中包含它，可以复制并修改。但请保留 data-* 属性。其余的标记由您决定。

在编辑操作中

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

FileUploader 服务需要一个唯一的文件夹名来存储与特定对象关联的附件文件。为了对新对象和现有对象都实现这一点，我们建议您遵循“editId 模式”，在该模式中，表单在其整个生命周期中（包括必要的多次验证）被分配一个唯一的、随机的“editId”。这允许我们管理尚未具有其 own 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('mylen.file_uploader')->syncFiles(
            array('from_folder' => 'attachments/' . $posting->getId(), 
              'to_folder' => 'tmp/attachments/' . $editId,
              'create_to_folder' => true));
    }
}

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

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

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

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

$fileUploader = $this->get('mylen.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获取文件名列表，并将其按需镜像到您的数据库中。

在您的布局中

为了通过Assetic提供必要的JavaScript（请注意，您必须提供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'
    '@JQueryFileUploadBundle/Resources/public/js/jquery.fileupload.js'
    '@JQueryFileUploadBundle/Resources/public/js/FileUploader.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

在编辑模板中

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

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

{% block body %}

{# Underscore templates for the uploader #}
{% include "JQueryFileUploadBundle: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('mylen.file_uploader')->handleFileUpload(array('folder' => 'tmp/attachments/' . $editId));
}

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

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

删除文件

迟早会删除帖子，你希望所有附件也一起被删除。

你可以这样做：

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

你可能想在管理类或Doctrine事件监听器中做这件事，但这不是我们的职责。

删除临时文件

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

考虑安装这个shell脚本作为夜间的cron作业。这个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

等等。

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

限制

此包通过glob()函数访问文件系统。它不能与S3流包装器直接使用。

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

注意

上传器使用了Bootstrap约定进行样式设计。如果你在项目中使用了Bootstrap，上传器应该看起来相当美观。

“选择文件”按钮允许多选，也支持拖放。