143

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

FirefoxとInternetExplorerで動作するソリューションがあります。それはきれいではありませんが、私は現時点で物事を試しているだけです：

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に最も関心がありますが、他のブラウザの提案も受け付けています。

編集：「なぜあなたはこれをしたいのですか？」という質問に答えて：

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

4

5 に答える 5

200

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

私が最初にこの回答を書いたので、ファイルAPIは標準として提案され、ほとんどのブラウザーに実装されました（IE 10以降、FileReaderここで説明するAPIのサポートが追加されましたが、まだFileAPIではありません）。APIは、ファイルの非同期読み取り、バイナリファイルのサポートの向上、さまざまなテキストエンコーディングのデコードをサポートするように設計されているため、古いMozillaAPIよりも少し複雑です。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プロジェクトにパッチを送信できます。もう1つの可能性は、 HTML5に含めるためのMozillaAPIを提案することです。WHATWGメーリングリストはおそらくそれを行うのに最適な場所です。そうすれば、少なくとも2年以内に、これを行うためのクロスブラウザーの方法が存在する可能性がはるかに高くなります。もちろん、パッチまたはHTML 5に含めるための提案のいずれかを提出することは、アイデアを擁護するための作業を意味しますが、Firefoxがすでにそれを実装しているという事実は、あなたに最初の何かを与えます。

于 2009-04-16T01:02:02.617 に答える
32

ユーザーが選択したファイルを読み取るには、ファイルを開くダイアログを使用して、<input type="file">タグを使用できます。これに関する情報はMSDNから見つけることができます。ファイルを選択すると、FileReaderAPIを使用してコンテンツを読み取ることができます。

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>

于 2017-03-03T15:46:41.853 に答える
16

最新のネイティブな代替手段があります。ファイルはBlobを実装しているため、 Blob.text（）を呼び出すことができます。

async function readText(event) {
  const file = event.target.files.item(0)
  const text = await file.text();
  
  document.getElementById("output").innerText = text
}
<input type="file" onchange="readText(event)" />
<pre id="output"></pre>

現在（2020年9月）これはChromeとFirefoxでサポートされています。他のブラウザでは、 blob-polyfillなどのポリフィルをロードする必要があります。

于 2020-09-29T05:06:23.983 に答える
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;
  }
}
于 2012-08-17T08:23:10.800 に答える
0

これは正常に機能します

function onClick(event) {
    filecontent = "";
    var myFile = event.files[0];
    var reader = new FileReader();

    reader.addEventListener('load', function (e) {
      filecontent = e.target.result;

    });
    reader.readAsBinaryString(myFile);
  }
于 2021-05-12T07:31:17.447 に答える