从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()