javascript - 如何通过图像预览多次显示文件输入按钮？

Question

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

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

jquery

<script >
    $(document).ready(function() {
        if (window.File && window.FileList && window.FileReader) {
            $("#files").on("change", function(e) {
                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("#files");
                        $(".remove").click(function() {
                            $(this).parent(".pip").remove();
                        });
                    });
                    fileReader.readAsDataURL(f);
                }
            });
        } else {
            alert("Your browser doesn't support to File API")
        }
    });
</script>

CSS

input[type="file"] {
  display: block;
}
.imageThumb {
  max-height: 75px;
  border: 2px solid;
  padding: 1px;
  cursor: pointer;
}
.pip {
  display: inline-block;
  margin: 10px 10px 0 0;
}
.remove {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}
.remove:hover {
  background: white;
  color: black;
}

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

<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>

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

Answer 1

不要为两个按钮指定相同的 id(您提供的任何 id 都必须是唯一的)，而是为它们指定相同的 class，以便您可以在 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>

然后您的 Javascript 需要更新以根据类而不是 id 绑定(bind)监听器。 .insertAfter() 也会更新以引用单击的特定项目。

$(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")
  }
});

DEMO