Предварительный просмотр ввода добавленного файла (HTML Jquery)

Question

Я пытаюсь просмотреть изображения, загруженные на мою страницу с помощью jquery. Входной файл по умолчанию, который я поместил на своей странице тела, работает и предварительно просматривает изображение.

Мой HTML-код:

<div class="row">
                <div class="col s12 m3">
                    <div class="card">
                        <div class="card-content">
                            <div class="file-field input-field">
                                <div class="btn"><span>File</span><input type="file" id="file"></div>
                                <div class="file-path-wrapper"><input class="file-path validate" type="text"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

Когда я добавляю то же самое в JQuery и использую добавленный входной файл, изображение не просматривается.

Мой код JQuery:

 $("#responses").append(' <div class="row"><div class="col s12 m3"><div class="card"><div class="card-content"><div class="file-field input-field"><div class="btn"><span>File</span><input type="file" id="file"></div><div class="file-path-wrapper"><input class="file-path validate" type="text"></div></div></div></div></div></div>')

Мой код Javascript (для предварительного просмотра файла)

function readURL(input) {

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#file").change(function () {
            readURL(this);
        });

Answer 1

Если я правильно понял ваш вопрос, вы пытаетесь динамически добавить некоторый код в событие aync, например.после завершения какого-либо события xhr, в таких случаях вам нужно привязать событие к вновь созданному элементу dom.

Так что прямо там, где вы пишете

 $("#responses").append(' <div class="row"><div class="col s12 m3"><div class="card"><div class="card-content"><div class="file-field input-field"><div class="btn"><span>File</span><input type="file" id="file"></div><div class="file-path-wrapper"><input class="file-path validate" type="text"></div></div></div></div></div></div>')

Вам нужно написать следующеепривязка событий снова.

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

Answer 2

Изменить

reader.onload = 

На

reader.onloadend =