Dateien mit JavaScript lesen und speichern

Da Google die Funktion zum Synchronisieren von Plug-in-Daten noch nicht bereitstellt, müssen sich Plug-in-Konfigurationen beim Importieren und Exportieren mit Dateien befassen. Aus Sicherheitsgründen stellt nur der IE APIs für den Zugriff auf Dateien bereit, aber mit der Einführung von HTML 5 wurde dies auch von anderen Browsern unterstützt.

Zuerst lesen wir die Datei. W3C stellt einige Datei-APIs bereit, von denen die FileReader-Klasse die wichtigste ist.

Listen Sie zun?chst die HTML-Tags auf, die verwendet werden müssen:

 <input type="file" id="file" onchange="handleFiles(this.files)"/>

Wenn eine Datei ausgew?hlt ist, Die Liste mit der Datei (ein FileList-Objekt) wird als Parameter an die Funktion handleFiles() übergeben.

Dieses FileList-Objekt ?hnelt einem Array, Sie k?nnen die Anzahl der Dateien kennen und seine Elemente sind Dateiobjekte.

Attribute wie Name, Gr??e, lastModifiedDate und Typ k?nnen von diesem File-Objekt abgerufen werden.

übergeben Sie dieses File-Objekt an die Lesemethode des FileReader-Objekts, um die Datei zu lesen.

FileReader verfügt über 4 Lesemethoden:

readAsArrayBuffer(file): Liest die Datei als ArrayBuffer.

readAsBinaryString(file): Liest die Datei als Bin?rzeichenfolge

readAsDataURL(file): Liest die Datei als Daten-URL

readAsText(file, [encoding] ) : Liest die Datei als Text, der Standardkodierungswert ist ?UTF-8“

Darüber hinaus kann die abort()-Methode das Lesen der Datei stoppen.

Nachdem das FileReader-Objekt die Datei gelesen hat, muss sie noch verarbeitet werden. Um den aktuellen Thread nicht zu blockieren, übernimmt die API ein Ereignismodell und Sie k?nnen diese Ereignisse registrieren:

onabort: ausgel?st, wenn unterbrochen

onerror: ausgel?st, wenn ein Fehler aufgetreten ist

onload: Datei erfolgreich gelesen. Wird ausgel?st, wenn der Abruf abgeschlossen ist.

onloadend: Wird ausgel?st, wenn die Datei gelesen wird, unabh?ngig vom Fehler.

onloadstart: Wird ausgel?st, wenn das Lesen der Datei beginnt.

onprogress: Wenn die Datei gelesen wird,

regelm??ig ausl?sen. Mit diesen Methoden k?nnen Sie Dateien verarbeiten.

Datei lesen

Versuchen wir zun?chst, eine Textdatei zu lesen:

function handleFiles(files) {
    if (files.length) {
        var file = files[0];
        var reader = new FileReader();
        if (/text/w+/.test(file.type)) {
            reader.onload = function() {
                $(&#39;<pre class="brush:php;toolbar:false">&#39; + this.result + &#39;

').appendTo('body'); } reader.readAsText(file); } } }

   <span style="font-family: Arial, Helvetica, sans-serif;">這里的this.result實(shí)際上就是reader.result，也就是讀取出來的文件內(nèi)容。</span>

Testen Sie es und Sie werden feststellen, dass der Inhalt dieser Datei zum hinzugefügt wird Webseite. Wenn Sie Chrome verwenden, müssen Sie die Webseite auf dem Server oder in einem Plug-in ablegen. Das Dateiprotokoll schl?gt fehl.

Versuchen wir es noch einmal mit dem Bild, da der Browser das Bild des Daten-URI-Protokolls direkt anzeigen kann. Daher werden wir dieses Mal das Bild hinzufügen:

function handleFiles(files) {
    if (files.length) {
        var file = files[0];
        var reader = new FileReader();
        if (/text/w+/.test(file.type)) {
            reader.onload = function() {
                $(&#39;<pre class="brush:php;toolbar:false">&#39; + this.result + &#39;

').appendTo('body'); } reader.readAsText(file); } else if(/image/w+/.test(file.type)) { reader.onload = function() { $('').appendTo('body'); } reader.readAsDataURL(file); } } }

Tats?chlich ist die Eingabe: Die Dateisteuerung unterstützt auch die Auswahl mehrerer Dateien:

<input type="file" id="files" multiple="" onchange="handleFiles(this.files)"/>

Auf diese Weise muss handleFiles() Dateien durchlaufen und verarbeiten.

Wenn Sie nur einen Teil der Daten lesen m?chten, verfügt das File-Objekt auch über die Methoden webkitSlice() oder mozSlice() zum Generieren von Blob-Objekten. Dieses Objekt kann von FileReader auf die gleiche Weise wie das File-Objekt gelesen werden. Diese beiden Methoden empfangen 3 Parameter: Der erste Parameter ist die Startposition; der zweite Parameter ist die Endposition. Wenn er weggelassen wird, wird er bis zum Ende der Datei gelesen.

Beispiele finden Sie unter ?Lokale Dateien in JavaScript lesen“.

Natürlich kann es neben dem Import von Daten und der Anzeige von Dateien auch für den AJAX-Upload verwendet werden. Informationen zum Code finden Sie unter ?Dateien aus Webanwendungen verwenden“.

Datei speichern

Tats?chlich bietet die Datei-API: Writer 4 Schnittstellen, aber derzeit implementieren nur einige Browser (Chrome 8+ und Firefox 4+) BlobBuilder und die anderen Schnittstellen sind nicht verfügbar.

Für nicht unterstützte Browser k?nnen Sie BlobBuilder.js und FileSaver.js verwenden, um Unterstützung zu erhalten.

Ich habe recherchiert und das Geheimnis entdeckt.

BlobBuilder kann ein Blob-Objekt erstellen. übergeben Sie dieses Blob-Objekt an die Methode URL.createObjectURL(), um eine Objekt-URL abzurufen. Und diese Objekt-URL ist die Download-Adresse dieses Blob-Objekts.

Nachdem Sie die Download-Adresse erhalten haben, erstellen Sie ein a-Element, weisen Sie die Download-Adresse dem href-Attribut zu und weisen Sie den Dateinamen dem Download-Attribut zu (Chrome 14+ unterstützt).

Erstellen Sie dann ein Klickereignis und übergeben Sie es zur Verarbeitung an das a-Element, wodurch der Browser mit dem Herunterladen des Blob-Objekts beginnt.

Abschlie?end verwenden Sie URL.revokeObjectURL(), um die Objekt-URL freizugeben und dem Browser mitzuteilen, dass er nicht mehr auf diese Datei verweisen muss.

Das Folgende ist ein vereinfachter Code:

var BlobBuilder = BlobBuilder || WebKitBlobBuilder || MozBlobBuilder;
var URL = URL || webkitURL || window;
function saveAs(blob, filename) {
    var type = blob.type;
    var force_saveable_type = 'application/octet-stream';
    if (type && type != force_saveable_type) { // 強(qiáng)制下載，而非在瀏覽器中打開
        var slice = blob.slice || blob.webkitSlice || blob.mozSlice;
        blob = slice.call(blob, 0, blob.size, force_saveable_type);
    }
    var url = URL.createObjectURL(blob);
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = url;
    save_link.download = filename;
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
    URL.revokeObjectURL(url);
}
var bb = new BlobBuilder;
bb.append('Hello, world!');
saveAs(bb.getBlob('text/plain;charset=utf-8'), 'hello world.txt');

Beim Testen werden Sie aufgefordert, eine Textdatei zu speichern. Chrome muss die Webseite auf dem Server oder in einem Plug-in ablegen.

附:寫文件工具類(干貨)

	/**
	 * 寫文件
	 * @param fileName 文件名
	 * @param data	文件流
	 * @param path	寫入路徑
	 * @return boolean
	 */
	public static boolean writeFile(String fileName,String data,String path) { 
       try { 
    	   
//    	   System.out.println("fileContent:" + data);
    	   
           File file = new File(path + fileName); 
           
           if(!file.exists()){
        	   file.createNewFile();
           }
           
           FileOutputStream outStream = new FileOutputStream(file);
           outStream.write(data.getBytes());  
           outStream.flush(); 
           outStream.close(); 
           outStream = null;
           return(true);
          
       } catch (Exception e) { 
           e.printStackTrace(); 
           return(false);
       } 
	}

美文美圖

?

以上就是JavaScript進(jìn)階(六)用JavaScript讀取和保存文件的內(nèi)容，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)（www.miracleart.cn）！