javascript - 为什么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

您需要在前置调用后重置输入。并且jquery具有默认元素目标。因此您可以使用this而不是事件.目标

$('[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" />