Javascript 如何使用图像预览多次显示文件输入按钮？

我正在使用Laravel5.6，我的表单中有图像上传按钮。目前，它正在使用上载图像缩略图预览单个文件

<h3>Upload  images</h3>
<input type="file" id="files" name="files[]" multiple />

现在我向同一表单添加另一个上传输入，如下所示

<div class="form-group row required">
    <div class="field" align="left" >
        <h3>Upload  images</h3>
        <input type="file" id="files" name="files[]" multiple />
        <input type="file" id="files" name="files[]" multiple />//new one
    </div>
</div>

上传图像
//新的

---

然后第一个上传按钮可以显示图像缩略图，但第二个文件输入并没有显示缩略图。有什么问题？如何解决此问题？

与其给两个按钮提供相同的

id

（您提供的任何id都必须是唯一的），不如给它们提供相同的

类
，以便在Javascript中引用

<div class="form-group row required">
    <div class="field" align="left" >
        <h3>Upload  images</h3>
        <input type="file" class="files" name="files[]" multiple />
        <input type="file" class="files" name="files[]" multiple />//new one
    </div>
</div>

不要给两个按钮提供相同的
id
（您提供的任何id都必须是唯一的），而是给它们提供相同的
类
，然后您可以在Javascript中引用它们

<div class="form-group row required">
    <div class="field" align="left" >
        <h3>Upload  images</h3>
        <input type="file" class="files" name="files[]" multiple />
        <input type="file" class="files" name="files[]" multiple />//new one
    </div>
</div>

对不起，
是什么意思？第一个上载按钮可以显示图像缩略图，但第二个文件输入没有显示缩略图
/facepalm可能与您为两个按钮提供了相同的
id
有关。每个HTML元素必须具有唯一的
id
。然后第一个上载按钮可以显示图像缩略图，但第二个文件输入没有显示缩略图。这意味着第一个文件输入按钮可以显示图像缩略图，但第二个图像上载输入按钮可以附加图像，但没有显示图像缩略图。我可以更改jquery更新吗根据idSorry，您对
的意思是什么？然后第一个上载按钮可以显示图像缩略图，但第二个文件输入没有显示缩略图
/facepalm可能与您为两个按钮提供了相同的
id
有关。每个HTML元素必须具有唯一的
id
。然后第一个上载按钮可以显示图像缩略图，但第二个文件输入没有显示缩略图。这意味着第一个文件输入按钮可以显示图像缩略图，但第二个图像上载输入按钮可以附加图像，但没有显示图像缩略图。我可以更改jquery更新吗根据身份证
<div class="form-group row required">
    <div class="field" align="left" >
        <h3>Upload  images</h3>
        <input type="file" class="files" name="files[]" multiple />
        <input type="file" class="files" name="files[]" multiple />//new one
    </div>
</div>

$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $(".files").on("change", function(e) {  // THIS LINE CHANGED
        var clickedButton = this;  // THIS LINE IS NEW
        var files = e.target.files,
        filesLength = files.length;

        for (var i = 0; i < filesLength; i++) {
          var f = files[i]
          var fileReader = new FileReader();

          fileReader.onload = (function(e) {
            var file = e.target;
            $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\">Remove image</span>" +
            "</span>").insertAfter(clickedButton);  // THIS LINE CHANGED

            $(".remove").click(function(){
              $(this).parent(".pip").remove();
            });
          });

          fileReader.readAsDataURL(f);
        }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});