不使用克隆文件输入的HTML5图像预览(在原始文件上做)

Question

我要做的是有一个模态表单，其中包含一个文件输入和其他各种表单字段，然后，一旦模式表单被提交，文件输入以及其他表单元素就会被移动到我最终想提交的主表单中，然后我重置表单并将原始文件输入替换为原始文件的克隆，以便接受更多的条目。

除了html 5图像预览不适用于任何克隆的文件输入，所以它只对页面加载上的原始文件输入工作，而不对任何后续输入工作。

一旦克隆被添加到DOM中，我就尝试更改事件处理程序并召回handleImages，但是两者似乎都没有什么区别，我想不出下一步该尝试什么。

我做了一个密码子，代码也在下面：

<div class="container">
  <form action="" class="form-inline" id="image-form">

    <label class="btn btn-info upload-button">
      Tap to Select Images

      <input type="file" style="display: none" multiple accept="image/*" capture="camera">
    </label>

    <button type="button" class="btn btn-primary" id="save-image">Save Images</button>

    <div class="preview">
      <div class="row">
      </div>
    </div>

  </form>

  <div id="saved-images" style="display: none;"></div>
</div>

JS

var imageCount = 0;

var ImageUpload = function() {

    var handleImages = function() {

        document.querySelector('#image-form input[type="file"]').addEventListener('change', handleFileSelect, false);

        // also tried
        // $(document).on('change', '#image-form input[type="file"]', handleFileSelect);
    }

    var handleFileSelect = function(e) {

        if ( !e.target.files || !window.FileReader) return;

        var $element = $(e.srcElement).closest('form').find('.preview > .row');
        $element.empty();

        var $srcElement = $(e.srcElement);

        var files = e.target.files;
        var filesArr = Array.prototype.slice.call(files);

        filesArr.forEach(function(f) {

            if (!f.type.match("image.*")) {
                return;
            }

            var reader = new FileReader();

            reader.onload = function(e) {

                var html = `
                  <div class="col-lg-3 col-md-4 col-xs-6 thumbnail m-t m-b m-r m-l">
                    <img class="img-responsive" src="${e.target.result}" alt="${f.name}">
                    <div class="title bg-success">${f.name}</div>
                  </div>
                `;


                $element.append(html);
            }

            reader.readAsDataURL(f);
        });

    }

    var handleSaveImage = function() {

        $(document).on('click', '#save-image', function(f) {

          // Clone the "real" input element
          var $real = $('#image-form input[type="file"]');
          var $clone = $real.clone(true);

          /* Also tried:
            var $clone = $real.clone(false);
            handleImages();

           and
            var $clone = $real.clone(true).val('');
          */

          // Put the cloned element directly after the real element
          $clone.insertAfter($real);

          // change the name and class of the real input
          $real.addClass(`image-${imageCount}`);

          // Move the real element 
          $real.appendTo('#saved-images');

          imageCount++;

          resetImageForm();
      });
  }

  var resetImageForm = function() {
      $('#image-form').trigger('reset');
      $('#image-form .preview').empty();
  }

  return {
      // main function to initiate the module
      init: function() {
          handleImages();
          handleSaveImage();
      }

  };


}();

jQuery(document).ready(function() {
    ImageUpload.init();
});

如果我将事件侦听器更改为$(document).on('change', '#image-form input[type="file"]', handleFileSelect);，那么每次都会到达预览代码，但没有预览，这里有一个分叉版本来显示在这里输入链接描述的含义

Answer 1

我看到了您的代码，下面是解决方案小提琴

use $(e.target) instead of $(e.srcElement)