javascript - 带预览的多图像 uploader

Question

我已经创建了一个图像 uploader ，但它无法正常工作。我不明白我哪里错了。 我的图像 uploader 的 JSFIDDLE 如下:

<强> JSFIDDLE

我面临的问题是，当我单击“选择文件”并选择多个文件并打开它时，我希望它显示我选择的所有图像的预览并且它可以正常工作，但是当我单击“删除”按钮时它只删除预览，这意味着如果我提交文件，即使我已删除的那些文件也会被上传。另一方面，我必须单击“添加更多图像”按钮来创建另一个与上面相同的 uploader ，但是当我添加多个图像时，它不会显示任何预览，因此我什至无法选择或删除我错误选择的图像。谁能找到我哪里出错了。我还需要添加更多图像按钮，这样如果我们忘记添加一些图像或图像位于不同的目录中，我们可以调用另一个输入类型文件，并且其功能应与之前的相同。

Answer 1

所以，你做了一些奇怪的事情(比如使用一个分配有整数的全局变量，我假设你用它来跟踪你的对象)。

我已经清理了你所发生的事情，并删除了一些多余的功能。本质上，您需要更好地利用 JavaScript FileReader() 函数。您需要仔细查看按钮；因为我没有为你修复它们。 ;)

您需要做的是迭代 this.files 数组，并使用 FileReader() 函数显示结果。代码如下。

    $('#add_more').click(function() {
      "use strict";
      $(this).before($("<div/>", {
        id: 'filediv'
      }).fadeIn('slow').append(
        $("<input/>", {
          name: 'file[]',
          type: 'file',
          id: 'file',
          multiple: 'multiple',
          accept: 'image/*'
        })
      ));
    });

    $('#upload').click(function(e) {
      "use strict";
      e.preventDefault();

      if (window.filesToUpload.length === 0 || typeof window.filesToUpload === "undefined") {
        alert("No files are selected.");
        return false;
      }

      // Now, upload the files below...
      // https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Handling_the_upload_process_for_a_file.2C_asynchronously
    });

    function deletePreview(ele, i) {
      "use strict";
      try {
        $(ele).parent().remove();
        window.filesToUpload.splice(i, 1);
      } catch (e) {
        console.log(e.message);
      }
    }

    $("#file").on('change', function() {
      "use strict";

      // create an empty array for the files to reside.
      window.filesToUpload = [];

      if (this.files.length >= 1) {
        $("[id^=previewImg]").remove();
        $.each(this.files, function(i, img) {
          var reader = new FileReader(),
            newElement = $("<div id='previewImg" + i + "' class='abcd'><img /></div>"),
            deleteBtn = $("<span class='delete' onClick='deletePreview(this, " + i + ")'>delete</span>").prependTo(newElement),
            preview = newElement.find("img");

          reader.onloadend = function() {
            preview.attr("src", reader.result);
            preview.attr("alt", img.name);
          };

          try {
            window.filesToUpload.push(document.getElementById("file").files[i]);
          } catch (e) {
            console.log(e.message);
          }

          if (img) {
            reader.readAsDataURL(img);
          } else {
            preview.src = "";
          }

          newElement.appendTo("#filediv");
        });
      }
    });

#formdiv {
  text-align: center;
}
#file {
  color: green;
  padding: 5px;
  border: 1px dashed #123456;
  background-color: #f9ffe5;
}
#img {
  width: 17px;
  border: none;
  height: 17px;
  margin-left: -20px;
  margin-bottom: 191px;
}
.upload {
  width: 100%;
  height: 30px;
}
.abcd {
  text-align: center;
  position: relative;
}
.abcd img {
  height: 200px;
  width: 200px;
  padding: 5px;
  border: 1px solid rgb(232, 222, 189);
}
.delete {
  color: red;
  font-weight: bold;
  position: absolute;
  top: 0;
  cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="formdiv">
  <div id="filediv">
    <input type="file" id="file" name="files[]" multiple="multiple" accept="image/*" title="Select Images To Be Uploaded">
    <br>
  </div>
  <input type="button" id="add_more" class="upload" value="Add More Images" />
  <input type="submit" name="submit" value="Add Product" class="upload" id="upload" title="Add Product To The Inventory">
</div>