さまざまなブラウザのJavaScriptでクライアント側のファイルコンテンツを読み取る


113

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

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に最も関心がありますが、他のブラウザーの提案にも積極的に対応しています。

編集:「なぜこれを実行するのですか?」という質問への回答:

基本的に、クライアント側でワンタイムパスワードと一緒にファイルの内容をハッシュして、確認としてこの情報を返信できるようにします。


私が答えを持っているわけではありませんが、明確にするために、ファイルの場所を知っておく必要がありますか?そうでない場合、ファイルの場所はファイル入力から読み取る必要がありますか、それともテキストボックス/テキストエリア/何でもかまいませんか?
Darko Z

良い質問。いいえ、ファイルの出所は気にしません。ファイルの内容のみです。ファイル入力を使用することは、それがネイティブhtmlであるため、私には理にかなっているように見えます。
Damovisa 2009

なぜこれをしたいのですか?サーバーはそれを行うためのものです。
geowa4 2009

簡単に言うと、ユーザーはパスワードを入力してファイルを選択します。パスワードはファイルの内容とともにハッシュ化され、これはファイルとともにサーバーに送信されます。そこに到達したら、正しいクライアントパスワードが使用されたことを確認できます。
Damovisa 2009

回答:


159

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

私が最初にこの回答を書いて以来、ファイルAPIは標準として提案され、ほとんどのブラウザーに実装されています(IE 10以降でFileReaderは、ここではAPIのサポートは追加されていませんが、FileAPIのサポートが追加されています)。この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)でこれを行う方法はないようです。Fileオブジェクトが持つ唯一のキーはfileNameおよびfileSizeです。FileおよびFileListサポートのコミットメッセージによると、これらはMozillaのFileオブジェクトから発想を得ていますが、機能のサブセットのみをサポートしているようです。

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


ありがとうございます。現時点では、パッチを提出するのに十分な献身的ではないと思います。とにかくあなたが知らないうちに起こることを望まないでしょう。それはちょっとブラウザのサンドボックスを壊します...
Damovisa

4
意図的にそのファイルをアップロードすることを選択したので、ブラウザのサンドボックスが壊れることはありません。サーバーに到達できる場合は、追加のラウンドトリップでブラウザに戻ることができます。オフラインモードをWebアプリで機能させるための作業を考えると、これは妥当な機能です。
ブライアンキャンベル、

うーん、実はそれは公平な点です。そのファイルを選択するユーザー操作がありました。ありがとう。
Damovisa 2009

@Damovisaこれがまだ気になっているかどうかはわかりませんが、私が回答を更新して、探していることを実行し、Firefox、Chrome、およびナイトリービルドに実装されている新しいFile APIについて言及するつもりですサファリ。
ブライアンキャンベル

すばらしい、ありがとう。私は他の仕事に移りましたが、答えがそこにあることを知っておくのは良いことです:)
Damovisa

25

ユーザーが選択したファイルを読み取るために、ファイルを開くダイアログを使用して、<input type="file">タグを使用できます。これに関する情報は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>


Internet Explorerでは機能しません。
Merwais Muafaq

4

幸せなコーディング!
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;
  }
 }

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.