Rails 3: лучший способ предварительного просмотра изображения перед загрузкой

Ответ 1

Итак!:) Основная идея состоит в том, чтобы использовать Javascript-класс FileReader, который действительно удобен для того, что вам нужно делать.

Вам просто нужно прослушать событие "изменения" на входе файла, а затем вызвать метод, который будет использовать метод readAsDataURL() класса FileReader. Затем вам просто нужно заполнить источник "предпросмотра img" возвращенным результатом метода...

Я написал вам простой jsFiddle, который достигает того, чего вы хотите. Вы можете увидеть мой код ниже:

<!-- HTML Code -->
<div class="upload-preview">
    <img />
</div>
<input class="file" name="logo" type="file">    

//JS File
$(document).ready(function(){
    var preview = $(".upload-preview img");

    $(".file").change(function(event){
       var input = $(event.currentTarget);
       var file = input[0].files[0];
       var reader = new FileReader();
       reader.onload = function(e){
           image_base64 = e.target.result;
           preview.attr("src", image_base64);
       };
       reader.readAsDataURL(file);
    });
});

И в документации Mozilla у вас есть еще один пример (безусловно, более надежный). Это решение должно работать с Safari (версия 6.0+).

Это единственный способ, которым я знаю, предварительно просмотреть изображение перед отправкой формы, но я думаю, что это довольно распространенный способ. Конечно, это не имеет никакого отношения к Ruby On Rails, поскольку мы используем Javascript здесь... Это невозможно было бы сделать с использованием Rails только тогда, когда вам нужно было загрузить изображение перед его рендерингом. (Поскольку Rails - серверная сторона, я думаю, что вы прекрасно понимаете, почему.:))