さまざまなブラウザのjavascriptでクライアント側のファイル内容を読み取る

Question

ブラウザを使用してクライアントマシン上のファイルの内容を読み込むためのスクリプト専用のソリューションを提供しようとしています。

私は、FirefoxとInternet Explorerで動作するソリューションを用意しています。それはきれいではありませんが、私は一瞬だけで物事をしようとしている：

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

私はgetFileContents()を呼び出すことができ、それがfileContentsテキストエリアに内容を書き込みます。

他のブラウザでこれを行う方法はありますか？

私は現時点ではSafariとChromeに最も関心がありますが、私は他のブラウザにも提案しています。

編集：質問、「なぜあなたはこれをしたいか」に対応して：

は基本的に、私はクライアント側でワンタイムパスワードと一緒にファイルの内容をハッシュしたいです私はこの情報を検証として送り返すことができます。

Answer 1

私はもともとこの答えを書いたので、ファイルAPI

に関する情報を追加して編集、File APIはFileReader APIのサポートがここで説明する追加IE 10、のよう（標準とimplemented in most browsersとして提案されています、まだFile APIではありません）。 APIは、ファイルの非同期読み取りをサポートし、バイナリファイルをよりよくサポートし、異なるテキストエンコーディングをデコードするように設計されているため、古いMozilla APIよりも少し複雑です。 some documentation available on the Mozilla Developer Networkとvarious examples onlineがあります。次のようにあなたはそれを使用します。

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

オリジナルの答えを

WebKitの（したがって、Safariとクローム）でこれを行う方法があるように表示されません。 Fileオブジェクトにある唯一のキーはfileNameとfileSizeです。 FileおよびFileListサポートのcommit messageによれば、これらはMozilla's File objectからインスピレーションを受けていますが、機能のサブセットのみをサポートしているようです。

これを変更したい場合は、いつでもWebKitプロジェクトにsend a patchとすることができます。別の可能性は、HTML 5に含めるためにMozilla APIを提案することです。 WHATWGメーリングリストはおそらくそれを行うのに最適な場所です。そうすれば、少なくとも2年後には、これを行うためのクロスブラウザの方法があるはずです。もちろん、パッチや提案をHTML 5に含めるということは、そのアイディアを守るための作業ではありますが、Firefoxがすでに実装していることから、何かを始めることができます。

Answer 2

ハッピーコーディング！
あなたは、Internet Explorer上でエラーが発生した場合、ユーザーが選択したファイルを読み出すために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

を許可するようにセキュリティ設定を変更し、ファイルを開くダイアログを使用して、あなたは<input type="file">タグを使用することができます。 information on it from MSDNが見つかります。ファイルが選択されたら、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>