Question

我试图以相同的形式为主图像和多个图像实现图像预览。下面的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>

JS档案

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);
  }

}

我使用Rails 5。

单个图像的Javascript图像预览和上传的多个图像

0 个答案: