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也被破坏了。

这里演示=＆gt; http://jsfiddle.net/zKyXC/

Answer 1

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

然而，我做了一个manege用另一种解决方案解决问题。在这里，万一其他人发现它有用。

我没有使用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属性发送。

Answer 2

如果我没有错，则只有带引号"的文件出错，如果您没有将其撤消，value将在"的第一次出现时被切断rest部分将显示为html，所以你需要的是

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

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

2 个答案: