Предварительный просмотр изображения перед загрузкой

Question

Я не уверен, почему мой код не работает.

Вот мой Javascript:

function readURL(input) {

        if (input.files && input.files[0]) {

            var reader = new FileReader();

            reader.onload = function (e) {

                $('#previewHolder').attr('src', e.target.result);

            }

            reader.readAsDataURL(input.files[0]);

        }

    }

    $("#images").change(function(){

        readURL(this);

    });

А вот мой HTML:

<form id="form1">
                    <input value="" type="file" id="images" name="images[]" accept="image/*" multiple/>
                    <img src="#" id="previewHolder" width="200px" alt="x.png"/>
                </form>

Iнашли несколько стековых потоков с буквально одним и тем же кодом, и он работает там.Я не могу найти недостающую часть.

Answer 1

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

Answer 2

@ Law, если вы ссылаетесь на этот документ, вы заметите, что событие изменения срабатывает только на тегах <input> и <textarea> ... Вам нужно использовать $("#images").load(, как описано здесь .