Lesen von Dateiinhalten auf der Client-Seite in Javascript in verschiedenen Browsern

Question

Ich versuche, eine Nur-Skript-Lösung zum Lesen des Inhalts einer Datei auf einem Client-Computer über einen Browser bereitzustellen.

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

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 getFileContents() nennen, und es wird den Inhalt in den fileContents Textbereich schreiben.

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

Ich bin im Moment am meisten mit Safari und Chrome beschäftigt, aber ich bin offen für Vorschläge für jeden anderen Browser.

Edit: Als Antwort auf die Frage: „Warum wollen Sie das tun wollen?“:

Grundsätzlich möchte ich den Inhalt der Datei zusammen mit einem Einmalpasswort auf der Client-Seite Hash also kann ich diese Information als Bestätigung zurücksenden.

Answer 1

Herausgegeben Informationen über die Datei-API

Da ich ursprünglich diese Antwort schrieb, die File API wurde als Standard und implemented in most browsers (ab IE 10, die Unterstützung beschrieben für FileReader API hinzugefügt hier vorgeschlagen hinzuzufügen, obwohl noch nicht die File API). Die API ist etwas komplizierter als die ältere Mozilla-API, da sie das asynchrone Lesen von Dateien, die bessere Unterstützung für Binärdateien und die Decodierung verschiedener Textkodierungen unterstützt. Es gibt some documentation available on the Mozilla Developer Network sowie various examples 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

Es scheint keine Möglichkeit, dies zu tun in WebKit (also, Safari und Chrome) zu sein. Die einzigen Schlüssel, die ein File-Objekt hat, sind fileName und fileSize. Nach der commit message für die Unterstützung von Datei und FileList sind diese von Mozilla's File object inspiriert, aber sie scheinen nur eine Teilmenge der Features zu unterstützen.

Wenn Sie dies ändern möchten, können Sie immer send a patch zum WebKit-Projekt. Eine andere Möglichkeit wäre, die Mozilla-API für die Aufnahme in HTML 5 vorzuschlagen; Die Mailingliste WHATWG ist wahrscheinlich der beste Ort dafür. Wenn Sie das tun, ist es wahrscheinlich, dass es zumindest in ein paar Jahren eine browserübergreifende Möglichkeit gibt, dies zu tun. Das Einreichen eines Patches oder eines Vorschlags für die Aufnahme in HTML 5 bedeutet natürlich etwas Arbeit, die die Idee verteidigt, aber die Tatsache, dass Firefox sie bereits implementiert, gibt Ihnen etwas, mit dem Sie beginnen können.

Answer 2

Glückliche Codierung!
Wenn Sie einen Fehler im Internet Explorer zu erhalten, ändern Sie die Sicherheitseinstellungen ActiveX

var CallBackFunction = function(content) 
{ 
    alert(content); 
} 
ReadFileAllBrowsers(document.getElementById("file_upload"), CallBackFunction); 

//Tested in Mozilla Firefox browser, Chrome 
function ReadFileAllBrowsers(FileElement, CallBackFunction) 
{ 
try 
{ 
    var file = FileElement.files[0]; 
    var contents_ = ""; 

    if (file) { 
     var reader = new FileReader(); 
     reader.readAsText(file, "UTF-8"); 
     reader.onload = function(evt) 
     { 
      CallBackFunction(evt.target.result); 
     } 
     reader.onerror = function (evt) { 
      alert("Error reading file"); 
     } 
    } 
} 
catch (Exception) 
{ 
    var fall_back = ieReadFile(FileElement.value); 
    if(fall_back != false) 
    { 
     CallBackFunction(fall_back); 
    } 
} 
} 

///Reading files with Internet Explorer 
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) 
    { 
    alert(Exception); 
    return false; 
    } 
} 

Answer 3

Um zu ermöglichen, eine Datei durch den Benutzer unter Verwendung einer Datei Öffnen-Dialog gewählt zu lesen, können Sie die <input type="file"> Tag verwenden können. Sie können information on it from MSDN finden.Wenn die Datei ausgewählt ist, können Sie den Inhalt mit der FileReader API 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>