javascript - HTML5 图像预览不适用于克隆文件输入(适用于原始文件)

Question

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

一切都工作得很好，除了 html 5 图像预览不适用于任何克隆的文件输入，因此它仅适用于页面加载时出现的原始文件输入，而不适用于任何后续输入。

我尝试过更改事件处理程序以及在将克隆添加到 DOM 后调用 handleImages，但似乎都没有什么区别，而且我不知道接下来要尝试什么。

我做了一个codpen代码如下:

HTML

<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); 那么预览代码每次都到达但没有预览，这里有一个 fork 版本来显示我的意思 enter link description here

Answer 1

我看到了你的代码，这是解决方案 jsfiddle

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