symfony 如何在Vich Uploader中显示表单提交前的图像缩略图?

bnlyeluc  于 2023-06-24  发布在  其他
关注(0)|答案(2)|浏览(117)

我使用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
fdbelqdn

fdbelqdn1#

下面是一个使用jquery库的简单例子:
在您模板中,我们假设您使用例如以下命令包含jquery库:

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

在你的项目中填入正确的resource jquery的url。
让我们创建一个简单的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用于读取filePreview()函数中文件的内容
如果要预览所有类型的文件,请使用<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>
aamkag61

aamkag612#

我选择了URL.createObjectURL(),因为它不会在Firefox中导致任何冻结,我发现下面的代码片段对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();

相关问题