web-dev-qa-db-ja.com

さまざまなブラウザーでJavaScriptを使用してクライアント側でファイルの内容を読み取る

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

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に関心がありますが、他のブラウザについては提案を受け入れています。

編集：「なぜこれをしたいのですか？」という質問に対する回答：

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

javascripthtmlfile-iosandbox
86
Damovisa

ファイルAPIに関する情報を追加するために編集されました

私が最初にこの答えを書いて以来、 File API が標準として提案され、 ほとんどのブラウザで実装されています （IE 10、ここで説明されているFileReader AP​​Iのサポートを追加しましたが、まだFile AP​​Iではありません。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が既にそれを実装しているという事実は、最初から何かを与えてくれます。

120
Brian Campbell

ファイルを開くダイアログを使用して、ユーザーが選択したファイルを読み取るには、<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>
17
cdiggins

ハッピーコーディング！
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;
  }
 }
2
Mnyikka