Как отобразить эскиз изображения перед отправкой формы в Vich Uploader? - PullRequest
Новая
       86

Как отобразить эскиз изображения перед отправкой формы в Vich Uploader?

0 голосов
/ 01 октября 2018

Я использую 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

Ответы [ 2 ]

0 голосов
/ 03 октября 2018

Я использовал URL.createObjectURL(), потому что в Firefox это не вызывает зависания, я обнаружил, что приведенный ниже фрагмент кода работает очень хорошо, особенно для Вича. 

  // 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();
0 голосов
/ 02 октября 2018

Вот простой пример использования библиотеки jquery:

в вашем шаблоне, мы предполагаем, что вы включаете библиотеку jquery, используя, например: 

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

, введите правильный URL-адрес в ресурс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 используется для чтения содержимого файла в функции filePreview ()

Если вы хотите просмотреть все типы файлов, используйте тег вместо тега.Поместите следующий код в событие 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
...