Clientseitiges Lesen von Dateiinhalten in Javascript in diversen Browsern

Ich versuche, eine reine Skriptlösung zum Lesen des Inhalts einer Datei auf einem Clientcomputer über einen Browser bereitzustellen.

Ich habe eine Lösung, die mit Firefox und Internet Explorer funktioniert. Es ist nicht schön, aber ich probiere im Moment nur Dinge aus:

function getFileContents() {
    var fileForUpload = document.forms[0].fileForUpload;
    var fileName = fileForUpload.value;

    if (fileForUpload.files) {
        var fileContents = fileForUpload.files.item(0).getAsBinary();
        document.forms[0].fileContents.innerHTML = fileContents;
    } else {
        // try the IE method
        var fileContents = ieReadFile(fileName);
        document.forms[0].fileContents.innerHTML = fileContents;
    }
}       

function ieReadFile(filename) 
{
    try
    {
        var fso  = new ActiveXObject("Scripting.FileSystemObject"); 
        var fh = fso.OpenTextFile(filename, 1); 
        var contents = fh.ReadAll(); 
        fh.Close();
        return contents;
    }
    catch (Exception)
    {
        return "Cannot open file :(";
    }
}

Ich kann anrufen getFileContents() und es wird den Inhalt in die schreiben fileContents Textbereich.

Gibt es eine Möglichkeit, dies in anderen Browsern zu tun?

Im Moment mache ich mir am meisten Sorgen um Safari und Chrome, aber ich bin offen für Vorschläge für andere Browser.

Bearbeiten: Auf die Frage “Warum wollen Sie das tun?”:

Grundsätzlich möchte ich den Dateiinhalt zusammen mit einem Einmalpasswort auf der Clientseite hashen, damit ich diese Informationen als Bestätigung zurücksenden kann.

Bearbeitet, um Informationen über die Datei-API hinzuzufügen

Da ich diese Antwort ursprünglich geschrieben habe, ist die Datei-API wurde als Standard vorgeschlagen und in den meisten Browsern implementiert (ab IE 10, der Unterstützung für FileReader API hier beschrieben, allerdings noch nicht die File API). Die API ist etwas komplizierter als die ältere Mozilla-API, da sie darauf ausgelegt ist, das asynchrone Lesen von Dateien, eine bessere Unterstützung für Binärdateien und die Dekodierung verschiedener Textkodierungen zu unterstützen. Es gibt einige Dokumentationen, die im Mozilla Developer Network verfügbar sind sowie verschiedene Beispiele online. Sie würden es wie folgt verwenden:

var file = document.getElementById("fileForUpload").files[0];
if (file) {
    var reader = new FileReader();
    reader.readAsText(file, "UTF-8");
    reader.onload = function (evt) {
        document.getElementById("fileContents").innerHTML = evt.target.result;
    }
    reader.onerror = function (evt) {
        document.getElementById("fileContents").innerHTML = "error reading file";
    }
}

Ursprüngliche Antwort

In WebKit (also Safari und Chrome) scheint es keine Möglichkeit zu geben, dies zu tun. Die einzigen Schlüssel, die a Datei Objekt hat sind fileName und fileSize. Entsprechend der Nachricht begehen für die Unterstützung von Dateien und Dateilisten sind diese inspiriert von Mozillas File-Objektaber sie scheinen nur eine Teilmenge der Funktionen zu unterstützen.

Wenn Sie dies ändern möchten, können Sie dies jederzeit tun Patch senden zum WebKit-Projekt. Eine andere Möglichkeit wäre, die Mozilla-API zur Aufnahme vorzuschlagen HTML5; der WASWG Mailingliste ist wahrscheinlich der beste Ort dafür. Wenn Sie das tun, ist es viel wahrscheinlicher, dass es zumindest in ein paar Jahren eine browserübergreifende Möglichkeit gibt, dies zu tun. Natürlich bedeutet das Einreichen eines Patches oder eines Vorschlags zur Aufnahme in HTML 5 einige Arbeit, um die Idee zu verteidigen, aber die Tatsache, dass Firefox es bereits implementiert, gibt Ihnen einen Anfang.

Um eine vom Benutzer ausgewählte Datei mit einem Datei-Öffnen-Dialog zu lesen, können Sie die verwenden <input type="file"> Schild. Sie können finden Informationen dazu von MSDN. Wenn die Datei ausgewählt ist, können Sie die verwenden FileReader-API um den Inhalt zu lesen.

function onFileLoad(elementId, event) {
    document.getElementById(elementId).innerText = event.target.result;
}

function onChooseFile(event, onLoadFileHandler) {
    if (typeof window.FileReader !== 'function')
        throw ("The file API isn't supported on this browser.");
    let input = event.target;
    if (!input)
        throw ("The browser does not properly implement the event object");
    if (!input.files)
        throw ("This browser does not support the `files` property of the file input.");
    if (!input.files[0])
        return undefined;
    let file = input.files[0];
    let fr = new FileReader();
    fr.onload = onLoadFileHandler;
    fr.readAsText(file);
}

<input type="file" onchange="onChooseFile(event, onFileLoad.bind(this, "contents"))" />
<p id="contents"></p>

Es gibt eine moderne native Alternative: Datei implementiert Klecksdamit wir anrufen können Blob.text().

async function readText(event) {
  const file = event.target.files.item(0)
  const text = await file.text();
  
  document.getElementById("output").innerText = text
}

<input type="file" onchange="readText(event)" />
<pre id="output"></pre>

Derzeit (September 2020) wird dies in Chrome und Firefox unterstützt, für andere Browser müssen Sie ein Polyfill laden, z Blob-Polyfill.

Das funktioniert gut

function onClick(event) {
    filecontent = "";
    var myFile = event.files[0];
    var reader = new FileReader();

    reader.addEventListener('load', function (e) {
      filecontent = e.target.result;

    });
    reader.readAsBinaryString(myFile);
  }