1

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

4

2 回答 2

2

我尝试了各种方法来实现上述方法（将每个单独的文件分配给 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 );
       });

并将其作为data标准 jQuery ajax 调用的属性发送。

于 2012-05-23T09:16:52.427 回答
0

如果我没记错，只有带引号的文件"出错，如果不转义，value第一次出现时会被截断，"其余部分将显示为html，所以你需要的是

read.result.replace(/"/g, '&quot;');
于 2012-05-22T10:11:54.640 回答