Lernen Sie, Dateien mit JavaScript zu lesen und zu speichern

In der Spalte „Javascript“ erfahren Sie, wie Sie Dateien mit JavaScript lesen und speichern.

Verwandte kostenlose Lernempfehlungen:

Javascript

(Video)

Da Google die Funktion zum Synchronisieren von Plug-in-Daten noch nicht bereitstellt, müssen beim Importieren und Exportieren von Plug-in-Konfigurationen Dateien verarbeitet werden. 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 wird, wird die Liste, die die Datei enthält (ein FileList-Objekt), 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.

Sie können Attribute wie Name, Größe, lastModifiedDate und Typ von diesem Dateiobjekt abrufen.

Ü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, die Codierung ist standardmäßig Der Wert 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: ausgelöst, wenn die Datei erfolgreich gelesen wurde

  onloadend: Die Datei wurde vollständig gelesen. Wird jedes Mal ausgelöst, egal ob es fehlschlägt oder nicht.

onloadstart: Wird ausgelöst, wenn das Lesen der Datei beginnt verarbeitet werden kann.

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 zur Webseite hinzugefügt wird. 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 unterstützt das Eingabe-: Dateisteuerelement auch die Auswahl mehrerer Dateien:

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

Auf diese Weise handleFiles() Es ist notwendig, Dateien zu durchlaufen und zu 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. Den Code finden Sie unter „Dateien aus Webanwendungen verwenden“.

Dateien speichern

Tatsächlich bietet File API: Writer 4 Schnittstellen, aber derzeit implementieren nur einige Browser (Chrome 8+ und Firefox 4+) BlobBuilder, und die restlichen 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 gelüftet.

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.

      最后，用URL.revokeObjectURL()来释放这个object URL，通知浏览器可以不必继续引用这个文件了。

下面就是一段化简的代码：

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

      测试时会提示保存一个文本文件。Chrome需要把网页放在服务器上或插件里。

附:写文件工具类(干货)

	/**
	 * 写文件
	 * @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);
       } 
	}

Das obige ist der detaillierte Inhalt vonLernen Sie, Dateien mit JavaScript zu lesen und zu speichern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!