Odczytywanie zawartości plików po stronie klienta w javascript w różnych przeglądarkach

Question

Próbuję dostarczyć rozwiązanie tylko do skryptu do odczytu zawartości pliku na komputerze klienta za pośrednictwem przeglądarki.

Mam rozwiązanie, które działa z przeglądarką Firefox i Internet Explorer. To nie jest ładna, ale próbuję tylko rzeczy w tej chwili:

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 :("; 
    } 
} 

mogę zadzwonić getFileContents() i będzie pisać zawartość do obszaru fileContents tekstowym.

Czy jest to możliwe w innych przeglądarkach?

Najbardziej interesuję się obecnie przeglądarkami Safari i Chrome, ale jestem otwarty na sugestie dotyczące każdej innej przeglądarki.

Edit: W odpowiedzi na pytanie „Dlaczego chcesz to zrobić?”:

Zasadniczo, chcę hash zawartość pliku wraz z jednorazowym hasłem po stronie klienta więc mogę wysłać tę informację z powrotem jako weryfikację.

Answer 1

Edytowane dodać informacje na temat interfejsu API pliku

Ponieważ pierwotnie napisał ten odpowiedzi, File API został zaproponowany jako standard i implemented in most browsers (jak IE 10, które dodaje opisano wsparcie dla FileReader API tutaj choć nie ma jeszcze interfejsu API File). Interfejs API jest nieco bardziej skomplikowany niż starsze API Mozilli, ponieważ jest zaprojektowany do obsługi asynchronicznego odczytu plików, lepszej obsługi plików binarnych i dekodowania różnych kodowań tekstowych. Jest some documentation available on the Mozilla Developer Network, a także various examples online. Można by użyć go w następujący sposób:

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"; 
    } 
} 

odpowiedź Original

Tam nie wydaje się być sposób to zrobić w ten sposób WebKit (Safari i Chrome). Jedynymi kluczami, które mają obiekt File, są: i . Zgodnie z commit message dla obsługi plików i listy plików, są one inspirowane przez Mozilla's File object, ale wydają się obsługiwać tylko podzbiór funkcji.

Jeśli chcesz to zmienić, zawsze możesz send a patch do projektu WebKit. Inną możliwością byłoby zaproponowanie Mozilla API do włączenia w HTML 5; lista mailingowa WHATWG jest prawdopodobnie najlepszym miejscem do zrobienia tego. Jeśli to zrobisz, jest o wiele bardziej prawdopodobne, że będzie to możliwe w różnych przeglądarkach, przynajmniej za kilka lat. Oczywiście przesłanie łaty lub propozycji włączenia do HTML 5 oznacza pewną pracę broniącą pomysłu, ale fakt, że Firefox już ją wdrożył, daje ci coś na początek.

Answer 2

Szczęśliwe kodowanie!
Jeśli pojawi się błąd w przeglądarce Internet Explorer, należy zmienić ustawienia zabezpieczeń w celu umożliwienia 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

W celu odczytania pliku wybranego przez użytkownika, przy użyciu dialogowym Otwieranie pliku można użyć tagu <input type="file">. Możesz znaleźć information on it from MSDN.Po wybraniu pliku można odczytać zawartość za pomocą urządzenia FileReader API.

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>