javascript - 将文件分配为隐藏输入的值

Question

我正在使用多文件上传字段<input name="filesToUpload" id="filesToUpload" type="file" multiple />在我的应用程序中。

我想要完成的是列出用户选择的文件，然后允许他们删除列表中的任何文件。 最后，提交表单后，我使用 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>');
         }
     }
  }

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

此处演示 => http://jsfiddle.net/zKyXC/

Answer 1

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

但是，我确实用替代解决方案解决了这个问题。放在这里以防其他人发现它有用。

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

我像这样创建并填充全局数组:

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 调用的 data 属性发送。