Почему приложение append не работает с функцией ввода типа файла javaScript?

Question

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

Я хочу добавить несколько картинок.

Мой код: -

$('[name=photo_input]').change(function (e) {
            var imagePath = e.target.files[0].name;
            var imageElement = `
        <div class="col-md-4">
        <img src="${imagePath}" />
        </div>
`;
$('.row').prepend(imageElement);
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row"></div>
<input type="file" name="photo_input" />

Ответ будет оценен по достоинству!

Answer 1

вам нужно reset the input после предварительного вызова. И у jquery есть элемент по умолчанию target.so, вы можете использовать this вместо event.target

$('[name=photo_input]').change(function(e) {
  var imagePath = this.files[0].name;
  var imageElement = `
        <div class="col-md-4">
        <img src="${imagePath}" />
        </div>
`;
  $('.row').prepend(imageElement);
  $(this).val('') //  you need to reset input after change event
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row"></div>
<input type="file" name="photo_input" />

Answer 2

Эта функция работает - каждое изображение создает элемент (e.target.files[0].name не является изображением путь , поэтому вы не должны представлять предварительный просмотр таким образом).

Но только последнее состояние входной файл отправляется на сервер.

• Вы можете использовать <input type="file" multiple />, тогда пользователи могут передать более одного изображения на вход - предыдущее состояние все равно будет отменено, но вы все равно POST что на сервер без дополнительных JS logi c.

• Вы можете создать внешний массив с файлами и добавлять туда файлы в случае изменения, но чтобы опубликовать их, вы должны переопределите метод отправки формы по умолчанию в JS (поскольку вы будете отправлять содержимое массива, а не значение из входных данных).