Question

我正在为照片库上传制作拖放文件上传系统。这是我处理丢弃文件的源代码。这个可以工作多个文件，如果我逐个删除它，但是当我同时丢弃多个文件时会发生此错误：

Uncaught InvalidStateError: Failed to execute 'readAsDataURL' on 'FileReader': The object is already busy reading Blobs.

function handleFiles(files)
{
    var reader = new FileReader();
    var formdata = new FormData();

    $.each(files, function(i, j)
    {
        $("td.photos span.status").html("Processing file: "+j.name);

        formdata.append('file', j);

        $.ajax({
            url: "uploadalbum.php",
            type: "POST",
            dataType: "json",
            data: formdata,
            processData: false,
            contentType: false,
            success: uploadfinished
        });

        reader.onload = handleReaderLoad;
        reader.readAsDataURL(j);
    });
}

有什么想法吗？

Answer 1

我认为错误已经给你了。

无法在'FileReader'上执行'readAsDataURL'：对象已经忙于读取Blob

所以文件阅读器已经很忙但只有当您删除多个文件时？然后它可能忙于第一个文件（和第二个崩溃）。

当你在每个循环中放入var reader = new FileReader();时，它将如下所示：

$.each(files, function(i, j)
{
    var reader = new FileReader();
    $("td.photos span.status").html("Processing file: "+j.name);

    formdata.append('file', j);
    .... <snip>

}

Answer 2

可能导致此问题的情况是文件阅读器被调用两次。如果它仍在运行，则会发出此错误。

    reader.onload = function( event ) {
            // do stuff
        };
    reader.readAsDataURL( file );

    /* arbitrarily complex code */
    reader.readAsDataURL( file2 );

    /* oops */

FileReader错误：对象已经忙于读取Blob

2 个答案: