JavaScript Advanced (6) Lesen und Speichern von Dateien mit JavaScript

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实际上就是reader.result，也就是读取出来的文件内容。</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) { // 强制下载，而非在浏览器中打开
        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进阶(六)用JavaScript读取和保存文件的内容，更多相关内容请关注PHP中文网（www.php.cn）！