1. ホーム
  2. javascript

[解決済み] 様々なブラウザで、クライアント側のjavascriptでファイルの内容を読み取る。

2022-05-14 07:25:24

質問

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

私は、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が一番気になりますが、他のブラウザでの提案もお待ちしています。

編集する。 という質問に対して、"なぜそうしたいのか?

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

どのように解決するのですか?

File APIに関する情報を追加するために編集しました。

最初にこの回答を書いてから ファイル API が標準として提案され はほとんどのブラウザで実装されています。 (のサポートが追加された IE 10 の時点では)。 FileReader API が追加されましたが、まだ File API)です。この API は古い Mozilla API よりも少し複雑で、ファイルの非同期読み取り、バイナリファイルのより良いサポート、異なるテキストエンコーディングのデコードをサポートするように設計されています。そこには Mozilla Developer Network でいくつかのドキュメントが利用可能です。 にもドキュメントがありますし、オンラインでも様々な例があります。以下のように使用します。

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とChrome)でこれを行う方法はないようです。唯一のキーは ファイル オブジェクトが持つ唯一のキーは fileNamefileSize . によると コミットメッセージ によると、File と FileList のサポートは以下のものに触発されています。 Mozilla の File オブジェクト に触発されたものですが、機能のサブセットのみをサポートしているように見えます。

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