如何在 Vich Uploader 中提交表单之前显示图像缩略图？答案

【问题标题】：How do Display Image Thumbnail before Form Submit in Vich Uploader?如何在 Vich Uploader 中提交表单之前显示图像缩略图？
【发布时间】：2019-03-06 21:50:26
【问题描述】：

我正在使用 Vich Uploader Bundle 为每个表单提交一张图片，我希望能够在图片上传之前显示图片的缩略图，因为实际上，图片已上传并且没有显示或执行任何操作表示发生了什么事。我尝试将 inject_on_load 设置为 true，但这只是将图像的 url 放在它出现的元素中。

config.yml

# Vich File Uploader
vich_uploader:
    db_driver: orm

    mappings:
        image:
            uri_prefix:         /uploads/listings/images
            upload_destination: '%kernel.root_dir%/../web/uploads/listings/images'
            namer:              vich_uploader.namer_uniqid
            inject_on_load:     false
            delete_on_update:   true
            delete_on_remove:   true
        avatar_image:
            uri_prefix:         /uploads/avatars
            upload_destination: '%kernel.root_dir%/../web/uploads/avatars'
            namer:              vich_uploader.namer_uniqid
            inject_on_load:     false
            delete_on_update:   true
            delete_on_remove:   true

        agency_logo:
            uri_prefix:         /uploads/avatars
            upload_destination: '%kernel.root_dir%/../web/uploads/avatars'
            namer:              vich_uploader.namer_uniqid
            inject_on_load:     false
            delete_on_update:   true
            delete_on_remove:   true

【问题讨论】：

我认为您必须使用 javascript 来做到这一点。如果你愿意，我可以帮助你
我在想zurb.com/playground/ajax-upload 可能是一个不错的插件，或者你知道有更好的插件吗？

标签： image symfony preview uploader vichuploaderbundle

【解决方案1】：

这是一个使用 jquery 库的简单示例：

在您的模板中，我们假设您正在包含您的 jquery 库，例如：

<script src="jquery.min.js"></script>

在您的项目中填写正确的 url 到 ressource jquery 。

让我们创建一个简单的 js 函数：

function filePreview(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#uploadForm + img').remove();
            $('#uploadForm').after('<img src="'+e.target.result+'" width="450" height="300"/>');
        }
        reader.readAsDataURL(input.files[0]);
    }
}

JavaScript FileReader 用于读取文件中的内容文件预览() 函数

如果要预览所有类型的文件，请使用<embed> 标签而不是<img> 标签。

将以下代码放在 reader.onload 事件中并删除现有代码：

$('#uploadForm + embed').remove();
$('#uploadForm').after('<embed src="'+e.target.result+'" width="450" height="300">');

现在调用 filePreview() 方法更改文件输入：

$("#file").change(function () {
    filePreview(this);
});

你的 Html 看起来是这样的：

<form method="post" action="upload.php" enctype="multipart/form-data" id="uploadForm">
    <input type="file" name="file" id="file" />
    <input type="submit" name="submit" value="Upload"/>
</form>

【讨论】：

这行得通，似乎它在 Firefox 上冻结了浏览器片刻，但我认为这不是 Chrome 的问题，可能也是我在 Linux Firefox 上的问题。我记得使用 dropzone（第 3 方 js 库）做同样的事情，有点冻结 FF 上的浏览器，但不是 Chrome。

【解决方案2】：

我选择了URL.createObjectURL()，因为它不会导致 Firefox 冻结，我发现下面的 sn-p 特别适用于 Vich。

  // Preview image thumbnail on upload for vich
  $.fn.previewImage = function() {
    $(this).change(function(e) {
      var url = URL.createObjectURL(e.target.files[0]);
      $(this).parents('.vich-image').children('img').remove();
      $(this).parents('.vich-image').prepend('<img class="preview_image" src="' + url + '"/>');
    })
  }
  $('#profile_avatarImage_file').previewImage();
  $('#profile_logo_file').previewImage();

【讨论】：