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

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я пытаюсь просмотреть изображения, загруженные на мою страницу с помощью 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 amp;amp; 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);
        });

1. Здравствуйте, попробуйте изменить .append на .html(html_code_here) или на .innerHTML = 'html code here' …

2. .html допускает только одно изменение, я хочу добавить несколько входных файлов

3. $("#responses").html( $("#responses").html() 'html code here'

4. Да, но я могу использовать только один входной файл с .html. Он просто изменил html, когда я снова нажал кнопку добавить

5. $("#responses").html( $("#responses").html() 'html code here' . Если вы хотите использовать append('html code here') , попробуйте использовать document.createElement('div') ссылку: w3schools.com/jsref/met_document_createelement.asp

Ответ №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);
});

1. как мне его переписать?

2. Мне было бы легче помочь, если бы вы опубликовали рабочий фрагмент своего кода.

3. Вот рабочая версия codepen.io/anon/pen/JVMNQJ?editors=1000 Я добавил этот метод hook в строку 109

4. Спасибо, но, похоже, это работает только для первого ввода. Когда я добавляю другой, он не работает. Это связано с аналогичным идентификатором?

5. Да, не может быть нескольких элементов с одинаковым идентификатором. Кроме того, если мое решение сработало для вашего первоначального вопроса, пожалуйста, примите его.

Ответ №2:

Изменить

 reader.onload =

Для

 reader.onloadend =