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

【问题标题】：FileReader error: The object is already busy reading BlobsFileReader 错误：对象已经忙于读取 Blob
【发布时间】：2014-07-19 18:14:24
【问题描述】：

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

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);
    });
}

有什么想法吗？

【问题讨论】：

处理完每个onLoad后，需要调用FileReader.abort()

标签： javascript jquery html

【解决方案1】：

我认为错误已经给你了。

在“FileReader”上执行“readAsDataURL”失败：对象已经忙于读取 Blob

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

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

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

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

}

【讨论】：

不错！很高兴它有所帮助，感谢您告诉我们！

【解决方案2】：

可能导致这种情况的情况是文件读取器被调用两次。如果它仍在运行，它将发出此错误。

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

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

    /* oops */

【讨论】：

【解决方案3】：

您可以尝试重新初始化 FileReader 对象。

    <script type="text/javascript">                                                             

   debugger;        

    ////////////////Write-1/////////////////////////
    
    var blob = new Blob([],  {type: "text/plain"});
    
    for (var i=0; i<10; i++)
    {
      
        blob = new Blob([blob," "+i], {type: "text/plain"});
    }
    
    /////////////////Write-2//////////////////////////
    
    var parts = [];

    for (var i = 11; i < 20; i++) 
    {
        parts.push(" " + i);
    }

     
      
    var blob1 = new Blob(parts);
    
    //////////////////Read-1////////////////////////////
    
    var def = new FileReader();  
    
   def.addEventListener("loadend", function(e) {  var x      = e.srcElement.result;  alert(x); });  

  def.readAsText( blob );  
  
  ///////////////////Read-2/////////////////////////////// 
  
    def = new FileReader();  
    
    def.addEventListener("loadend", function(e) {  var x      = e.srcElement.result;  alert(x); });  
   
    def.readAsText( blob );  
   
 /////////////////////////////////////////////////
     </script>

【讨论】：