Javascript 将文件指定为隐藏输入的值

我在我的应用程序中使用了一个多文件上传字段

我想完成的是列出用户选择的文件，然后允许他们删除列表中的任何文件。 最后，在提交表单时，我使用

FormData

对象通过AJAX以二进制形式发送整个数据

除了删除部分外，所有这些都非常有效

我知道

FileList

属性是只读的，所以我所做的是将文件作为隐藏输入字段的值分发，附加到我列出文件名的每个

li

。因此，如果用户删除一个

li

项，隐藏的输入字段将随之消失，最后，我通过将它们附加到

FormData

对象来收集所有剩余的内容

问题是，我每次尝试将文件作为值分配给隐藏的输入，都会得到奇怪的结果

我的代码是这样的：

listFiles : function () {
    var file, files, filesList, filesLength, read;

    files = this.files;
    filesList = $('.files');
    filesLength = files.length;

    // Clear the list
    filesList.html('');

    for ( var i = 0; i < filesLength; i++ ) {
        file = files[i];

        // This is to read the content of the file
        read=new FileReader();
        read.readAsBinaryString( file );

        // When reading is finished
        read.onloadend = function() {
           filesList.append(
                    '<li>' + 
                    '<span class="fileName">' + file.name + '</span>' + 
                    '<a href="#" class="deleteAttachment">x</a>' +
                    '<input type="hidden" name="file[]" value="' + read.result +'"/>' +
                    '</li>');
         }
     }
  }

globals.files =[].slice.call( this.files ); 

$.each( files, function( index, val ) {
            if ( this.name === fileText ) {
                globals.files.splice( index, 1 );
            }
        });

listFiles:function（）{
var文件、文件、文件列表、文件长度、读取；
files=this.files；
filesList=$（'.files'）；
filesLength=files.length；
//清除列表
html（“”）；
对于（var i=0；i”+
''+文件名+''+
'' +
'' +
“”）；
}
}
}

我只是从最后一个文件中获取数据，而且，DOM被破坏了，因为数据被打印得到处都是

---

Demo here=>

如果我没有错，只有带引号的文件

“

出错，如果您不转义它，

值将在第一次出现
“
时被切断，其余部分将显示为html，因此您需要的是

read.result.replace(/"/g, '"');

我尝试了各种方法来实现上述方法（将每个单独的文件分配给输入[type=“hidden”]字段的值，以允许文件删除功能），但没有一种方法成功。
目前，我不知道这是否可能做到

然而，我没有尝试用另一种解决方案来解决这个问题。在这里，以防其他人发现它有用

我没有使用
input[type=“hidden”]
而是使用了一个全局数组，在接收文件时将其存储在该数组中。然后，我以从数组中删除对象的标准方式从该数组中删除项。最后，我将每个项附加到
formData
对象，并将其发送到服务器

我创建并填充全局数组，如下所示：

listFiles : function () {
    var file, files, filesList, filesLength, read;

    files = this.files;
    filesList = $('.files');
    filesLength = files.length;

    // Clear the list
    filesList.html('');

    for ( var i = 0; i < filesLength; i++ ) {
        file = files[i];

        // This is to read the content of the file
        read=new FileReader();
        read.readAsBinaryString( file );

        // When reading is finished
        read.onloadend = function() {
           filesList.append(
                    '<li>' + 
                    '<span class="fileName">' + file.name + '</span>' + 
                    '<a href="#" class="deleteAttachment">x</a>' +
                    '<input type="hidden" name="file[]" value="' + read.result +'"/>' +
                    '</li>');
         }
     }
  }

globals.files =[].slice.call( this.files ); 

$.each( files, function( index, val ) {
            if ( this.name === fileText ) {
                globals.files.splice( index, 1 );
            }
        });

我从中删除如下内容：

listFiles : function () {
    var file, files, filesList, filesLength, read;

    files = this.files;
    filesList = $('.files');
    filesLength = files.length;

    // Clear the list
    filesList.html('');

    for ( var i = 0; i < filesLength; i++ ) {
        file = files[i];

        // This is to read the content of the file
        read=new FileReader();
        read.readAsBinaryString( file );

        // When reading is finished
        read.onloadend = function() {
           filesList.append(
                    '<li>' + 
                    '<span class="fileName">' + file.name + '</span>' + 
                    '<a href="#" class="deleteAttachment">x</a>' +
                    '<input type="hidden" name="file[]" value="' + read.result +'"/>' +
                    '</li>');
         }
     }
  }

globals.files =[].slice.call( this.files ); 

$.each( files, function( index, val ) {
            if ( this.name === fileText ) {
                globals.files.splice( index, 1 );
            }
        });

注意：
fileText
是存储要删除的项目名称的位置

最后，我将其附加到
formData
：

var formData = new FormData();

$.each( files, function( ind, val ) {
            formData.append( 'files[]', this );
       });

并将其作为标准jQuery ajax调用的
数据
属性发送。
您找到了关于此问题的正确解决方案吗？