從javascript中刪除特定的文件在javascript/jquery

Question

所以我做了一個腳本，你可以預覽多個圖像，然後用ajax請求發送它們。所有的腳本將在帖子末尾以c/C結尾，但你也可以在這裏找到它：http://aeronet.be/TESTIMG/

它很棒！

現在我想從用戶單擊圖像時從我的formData數組中刪除一個選定的圖像。 目前，當你點擊一個img時，它仍然出現在SERVER端。

爲了做到這一點，我的表單數據看起來像這樣：

form_data { 
'name_of_image' : file_data, 
'name_of_image' : file_data, 
} 

我把name_of_img在IMG預覽我的alt屬性，當你在圖像上單擊它認爲：

var filename = $(this).attr('alt'); 
var newfilename = filename.replace(/\./gi, "_"); 
delete form_data[newfilename]; 
$(this).remove(); 

我改變了「。」與「_」，因爲在我的服務器端陣列看起來像

array (size=1) 
     'favicon_ico' => 
     array (size=5) 
      'name' => string 'favicon.ico' (length=11) 
      'type' => string 'image/x-icon' (length=12) 
      'tmp_name' => string 'C:\wamp\tmp\php96C9.tmp' (length=23) 
      'error' => int 0 
      'size' => int 145388 

所以我的問題是：我怎麼能發送之前刪除我FORMDATA陣列給定的IMG？

HTML：

<input id="avatar" type="file" name="avatar[]" multiple /> 
<button id="upload" value="Upload" type="button">upload</button> 

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

<div class="return_php"></div> 

<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> 

使用Javascript/jQuery的：

$(document).ready(function(){ 
     var form_data = new FormData(); 
     var number = 0; 

     /* WHEN YOU UPLOAD ONE OR MULTIPLE FILES */ 
     $(document).on('change','#avatar',function(){ 
      console.log($("#avatar").prop("files").length); 
      len_files = $("#avatar").prop("files").length; 
      for (var i = 0; i < len_files; i++) { 
       var file_data = $("#avatar").prop("files")[i]; 
       form_data.append(file_data.name, file_data); 
       number++; 
       var construc = '<img width="200px" height="200px" src="' + window.URL.createObjectURL(file_data) + '" alt="' + file_data.name + '" />'; 
       $('.preview').append(construc); 
      } 
     }); 

     /* WHEN YOU CLICK ON THE IMG IN ORDER TO DELETE IT */ 
     $(document).on('click','img',function(){ 

      var filename = $(this).attr('alt'); 
      var newfilename = filename.replace(/\./gi, "_"); 
      delete form_data[newfilename]; 
      $(this).remove(); 

     }); 

     /* UPLOAD CLICK */ 
     $(document).on("click", "#upload", function() { 
      $.ajax({ 
         url: "target.php", 
         dataType: 'script', 
         cache: false, 
         contentType: false, 
         processData: false, 
         data: form_data,       // Setting the data attribute of ajax with form_data 
         type: 'post', 
         success: function(data){ 
          $('.return_php').html(data); 
         } 
       }) 
     }) 
    }); 

PHP - TARGET.PHP

<?php 


var_dump($_FILES); 

?> 

Answer 1

使用delete()方法：

form_data.delete($(this).attr('alt')) 
$(this).remove()