用于上载单个图像和多个图像的Javascript图像预览

我正在尝试为主图像和同一表单中的多个图像实现图像预览。下面的js是独立工作的，但是当这些功能结合在一起时，我只能让主图像预览工作，而不能让多个图像上传的预览工作。我不是一个js人，但我相信问题在于addEventListener，我一直无法解决这个问题。另一个想法是在变量中，但我也调整了它们，但没有成功。任何帮助都将不胜感激，因为我在网上任何地方都没有发现类似的问题

下面是html/erb的快照

<div class="form-group col-md-6">
  <label class="btn btn-sm btn-outline-primary">
    Upload feature image <%= f.file_field :feature_image, style: 'display:none', onchange: "previewFeatureFile()" %>
  </label><br />
  <img id="feature_prev" src="#" height="200" />
</div> 

<div class="form-group col-md-6">
  <label class="btn btn-sm btn-outline-primary">
    Upload multiple images <%= f.file_field :images, style: 'display:none', onchange: "previewImagesFiles()", multiple: true %>
  </label>
  <div id="preview"></div>
</div> 

我使用的是Rails 5

function previewFeatureFile() {
  var preview = document.querySelector('#feature_prev');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

function previewImagesFiles() {

  var preview = document.querySelector('#preview');
  var files   = document.querySelector('input[type=file]').files;

  function readAndPreview(file) {

    // Make sure `file.name` matches our extensions criteria
    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
      var reader = new FileReader();

      reader.addEventListener("load", function () {
        var image = new Image();
        image.height = 100;
        image.title = file.name;
        image.src = this.result;
        preview.appendChild( image );
      }, false);

      reader.readAsDataURL(file);
    }

  }

  if (files) {
    [].forEach.call(files, readAndPreview);
  }

}