如何從filelist中刪除圖像並使用api請求將其上傳到服務器上？

Question

我使用Html多選來選擇圖像並應用JavaScript來顯示圖像。如圖所示，在這張圖片中可以看到，每個圖像上都有一個十字形，可以從UI中刪除圖像。 因此，如果在顯示的三個圖像中刪除其中一個，並將其上載到服務器上，它將上傳所有三個圖像而不是兩個圖像。

我的腳本：

$(document).on('click', '.browse', function() { 
      var file = $(this).parent().parent().parent().find('.file'); 
      file.trigger('click'); 
     }); 
     $(document).on('change', '.file', function() { 
      $(this).parent().find('.form-control').val($(this).val().replace(/C:\\fakepath\\/i, '')); 
     }); 

     function handleFileSelect(evt) { 
      var files = evt.target.files; // FileList object 
      // Loop through the FileList and render image files as thumbnails. 
      for (var i = 0, f; f = files[i]; i++) { 
       if (i > 3) { 

        break; 
       } 

           var reader = new FileReader(); 

       // Closure to capture the file information. 
       reader.onload = (function (theFile) { 
        return function (e) { 
         // Render thumbnail. 
         var span = document.createElement('span'); 
         span.innerHTML = ['<img class="thumbs_image" src="', e.target.result, 
          '" title="', escape(theFile.name), '"/> <a href="#" class="remove_pic">X</a>' 
         ].join(''); 
         document.getElementById('list').insertBefore(span, null); 

         span.children[1].addEventListener("click", function (event) { 
          span.parentNode.removeChild(span); 


         }); 
        }; 
       })(f); 

       // Read in the image file as a data URL. 
       reader.readAsDataURL(f); 
      } 
     } 

Answer 1

可惜這不能這樣做，你不能因爲選定的文件/圖片存儲在只讀文件清單中刪除從HTML輸入元素的文件對象：https://developer.mozilla.org/en-US/docs/Web/API/FileList

作爲一種替代方案，您可以保留自己的文件數組，但是您需要使用自己的實現來上傳文件。