FileReader-Fehler: Das Objekt ist bereits damit beschäftigt, Blobs zu lesen

Ich erstelle ein Drag-and-Drop-Datei-Upload-System für das Hochladen von Fotogalerien. Dies ist mein Quellcode, der abgelegte Dateien behandelt. Dieser funktioniert mit mehreren Dateien, wenn ich sie einzeln ablege, funktioniert es, aber wenn ich mehr als eine gleichzeitig ablege, tritt dieser Fehler auf:

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

Irgendwelche Ideen?

Ich denke, der Fehler ist Ihnen bereits gegeben.

Fehler beim Ausführen von „readAsDataURL“ auf „FileReader“: Das Objekt ist bereits damit beschäftigt, Blobs zu lesen

Der Dateileser ist also schon beschäftigt, aber nur, wenn Sie mehrere Dateien ablegen? Dann ist es wahrscheinlich mit der ersten Datei beschäftigt (und die zweite stürzt ab).

Wenn Sie setzen var reader = new FileReader(); In Ihrer jQuery-Schleife funktioniert es wie folgt:

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

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

}

Ein Fall, der dies verursachen kann, ist, wenn ein Dateireader zweimal aufgerufen wird. Wenn es noch läuft, wird dieser Fehler ausgegeben.

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

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

    /* oops */

Sie können versuchen, das FileReader-Objekt neu zu initialisieren.

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