Utilizzo di FileReader.readAsArrayBuffer() sui file modificati in Firefox

Question

Sto incontrando un problema strano utilizzando FileReader.readAsArrayBuffer che sembra interessare solo Firefox (ho provato nella versione corrente - v40). Non posso dire se sto facendo qualcosa di sbagliato o se si tratta di un bug di Firefox.

Ho qualche JavaScript che utilizza readAsArrayBuffer per leggere un file specificato in un campo <input>. In circostanze normali, tutto funziona correttamente. Tuttavia, se l'utente modifica il file dopo averlo selezionato nel campo <input>, readAsArrayBuffer può diventare molto confuso.

Il ArrayBuffer ritorno da readAsArrayBuffer ha sempre la lunghezza del file originale. Se l'utente cambia il file per ingrandirlo, non ottengo nessuno dei byte dopo la dimensione originale. Se l'utente cambia il file per renderlo più piccolo, il buffer ha ancora la stessa dimensione e l''eccesso' nel buffer è riempito con i codici di carattere 90 (maiuscola 'Z' se vista come una stringa).

Poiché questo codice è così semplice e funziona perfettamente in tutti gli altri browser che ho provato, penso che sia un problema di Firefox. Io ho reported it as a bug per Firefox ma voglio assicurarmi che questo non sia solo ovvio che sto sbagliando.

Il comportamento può essere riprodotto dal seguente frammento di codice. Tutto quello che dovete fare è:

1. Cerca un file di testo che dispone di 10 caratteri in esso (10 non è un numero magico - sto solo usando come un esempio)
2. Osservare che il risultato è una serie di 10 elementi che rappresentano i codici carattere di ogni articolo
3. Mentre è ancora in esecuzione, eliminare 5 caratteri dal file e salvare
4. Osservare che il risultato è ancora una matrice di 10 elementi: i primi 5 sono corretti ma gli ultimi 5 sono tutti 90 (maiuscola Z)
5. Ora aggiunto 10 caratteri (quindi il file è ora 15 chara cters lunghi)
6. Osservare che il risultato è ancora un array di 10 elementi - l'ultimo 5 non vengono restituiti

function ReadFile() { 
 
    var input = document.getElementsByTagName("input")[0]; 
 
    var output = document.getElementsByTagName("textarea")[0]; 
 

 
    if (input.files.length === 0) { 
 
    output.value = 'No file selected'; 
 
    window.setTimeout(ReadFile, 1000); 
 
    return; 
 
    } 
 

 
    var fr = new FileReader(); 
 
    fr.onload = function() { 
 
    var data = fr.result; 
 
    var array = new Int8Array(data); 
 
    output.value = JSON.stringify(array, null, ' '); 
 
    window.setTimeout(ReadFile, 1000); 
 
    }; 
 
    fr.readAsArrayBuffer(input.files[0]); 
 

 
    //These two methods work correctly 
 
    //fr.readAsText(input.files[0]); 
 
    //fr.readAsBinaryString(input.files[0]); 
 
} 
 

 
ReadFile();

<input type="file" /> 
 
<br/> 
 
<textarea cols="80" rows="10"></textarea>

Nel caso frammento non funziona, il codice di esempio è anche disponibile come JSFiddle qui: https://jsfiddle.net/Lv5y9m2u/

Answer 1

Interessante, sembra che FF memorizzi nella cache la dimensione del buffer anche se il file è stato modificato.

è possibile fare riferimento a questo link, sostituito readAsArrayBuffer con è una funzionalità personalizzata che utilizza readAsBinaryString. funziona bene in FF e cromato

function ReadFile() { 
var input = document.getElementsByTagName("input")[0]; 
var output = document.getElementsByTagName("textarea")[0]; 

if (input.files.length === 0) { 
    output.value = 'No file selected'; 
    window.setTimeout(ReadFile, 1000); 
    return; 
} 

var fr = new FileReader(); 
fr.onload = function() { 
    var data = fr.result; 
    var array = new Int8Array(data); 
    output.value = JSON.stringify(array, null, ' '); 
    window.setTimeout(ReadFile, 1000); 
}; 
fr.readAsArrayBuffer(input.files[0]); 



//These two methods work correctly 
//fr.readAsText(input.files[0]); 
//fr.readAsBinaryString(input.files[0]); 
} 
if (FileReader.prototype.readAsArrayBuffer && FileReader.prototype.readAsBinaryString) { 
    FileReader.prototype.readAsArrayBuffer = function readAsArrayBuffer() { 
     this.readAsBinaryString.apply(this, arguments); 
     this.__defineGetter__('resultString', this.__lookupGetter__('result')); 
     this.__defineGetter__('result', function() { 
      var string = this.resultString; 
      var result = new Uint8Array(string.length); 
      for (var i = 0; i < string.length; i++) { 
       result[i] = string.charCodeAt(i); 
      } 
      return result.buffer; 
     }); 
    }; 
} 
ReadFile(); 

Answer 2

Penso che tu stia colpendo un baco di Firefox. Tuttavia, come hai sottolineato, readAsArrayBuffer si comporta correttamente in tutti i browser supportati tranne Firefox mentre readAsBinaryString è supportato da tutti i browser tranne IE.

Pertanto, è possibile preferire readAsBinaryString quando esiste e, in caso contrario, tornare a readAsArrayBuffer.

function readFileAsArrayBuffer(file, success, error) { 
    var fr = new FileReader(); 
    fr.addEventListener('error', error, false); 
    if (fr.readAsBinaryString) { 
     fr.addEventListener('load', function() { 
      var string = this.resultString != null ? this.resultString : this.result; 
      var result = new Uint8Array(string.length); 
      for (var i = 0; i < string.length; i++) { 
       result[i] = string.charCodeAt(i); 
      } 
      success(result.buffer); 
     }, false); 
     return fr.readAsBinaryString(file); 
    } else { 
     fr.addEventListener('load', function() { 
      success(this.result); 
     }, false); 
     return fr.readAsArrayBuffer(file); 
    } 
} 

Usage:

readFileAsArrayBuffer(input.files[0], function(data) { 
    var array = new Int8Array(data); 
    output.value = JSON.stringify(array, null, ' '); 
    window.setTimeout(ReadFile, 1000); 
}, function (e) { 
    console.error(e); 
}); 

violino di lavoro: Supporto https://jsfiddle.net/Lv5y9m2u/6/

Browser:

• Firefox: Usa readAsBinaryString, che non è problematico.
• IE> = 10: utilizza readAsArrayBuffer che è supportato.
• IE < = 9: l'intera API FileReader non è supportata.
• Quasi tutti gli altri browser: utilizza readAsBinaryString.