从javascript/jquery中的formData中删除特定文件

所以我制作了一个脚本，在发送ajax请求之前，可以预览多个图像。所有脚本在文章末尾都是c/c，但您也可以在此处找到：

它工作得很好

现在，我想在用户单击图像时从formData数组中删除一个choosen图像。 目前，当您单击img时，它仍然显示在服务器端

为此，我的表单数据如下所示：

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

我将\u img的名称\u放入img预览的我的alt属性中，当您单击图像时，它会执行以下操作：

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

我将“.”改为“u”，因为在我的服务器端，数组看起来是这样的

  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>

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

上传

javascript/jquery：

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

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

$（文档）.ready（函数（）{
var form_data=new FormData（）；
var数=0；
/*上载一个或多个文件时*/
$（文档）.on（'change'，'#avatar'，function（）{
console.log（$（“#avatar”）.prop（“files”）.length）；
len_files=$（“#头像”）.prop（“文件”）.length；
对于（var i=0；i

PHP-TARGET.PHP

<?php


var_dump($_FILES);

?>

使用以下方法：