使用jQuery使用預覽和刪除選項上傳多張圖片

Question

我創建了一個多圖像上傳器。 請檢查我的FIDDLE 。 我目前可以附加圖像，預覽圖像，然后也可以成功上傳。 而且單個圖像也可以刪除。 問題是當我刪除圖像時，當前腳本只能刪除圖像預覽，而不能刪除要上傳的文件。

明確地說，假設我上傳了5張圖片，那么所有5張圖片都會被預覽。 但是，如果我使用每張圖片上方的叉號刪除其中一張圖片，則它只會刪除預覽。 因此，現在，如果我單擊“提交”，則它將上傳所有5張圖像，但應該僅上傳4張圖像。

因此，如果有人可以幫助我使用此處的腳本刪除正在上傳的文件，而不僅僅是預覽。

HTML：

<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>
</div>

jQuery的

  $('#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
        });

        deletePreview = function (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='previewBox'><img /></div>"),
                deleteBtn = $("<span class='delete' onClick='deletePreview(this, " + i + ")'>X</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");
            });
          }
        });

CSS：

#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;
}
.previewBox {
  text-align: center;
  position: relative;
  width: 150px;
  height: 150px;
  margin-right: 10px;
  margin-bottom: 20px;
  float: left;
}
.previewBox img {
  height: 150px;
  width: 150px;
  padding: 5px;
  border: 1px solid rgb(232, 222, 189);
}
.delete {
  color: red;
  font-weight: bold;
  position: absolute;
  top: 0;
  cursor: pointer;
  width: 20px;
  height:  20px;
  border-radius: 50%;
  background: #ccc;
}

Answer 1

由於FileList是只讀的，因此您將無法通過這種方式進行操作，這意味着您無法從該對象的所選文件中刪除一個文件。 您可以閱讀，循環瀏覽，但是不能更改選擇。

請查看此答案以獲取更多詳細信息： 如何從輸入文件控件中刪除一個特定的選定文件

建議的解決方法是使用FileReader API，但瀏覽器支持不理想。

Answer 2

在delete中，您只從大量節點中刪除預覽節點和元素，還需要刪除輸入本身（實際上是在上傳文件）。

但是，您還必須修復add方法，因為您只添加了輸入，而沒有包裝div和Preview並且具有相同的ID。