すべてのブラウザーで JavaScript を使用してクライアント側でファイルの内容を読み取るにはどうすればよいですか?

JavaScript でのクライアント側のファイル内容の読み取り: クロスブラウザー ソリューション

はじめに

ブラウザを介してクライアント マシン上のファイル コンテンツにアクセスするのは一般的なタスクです。この記事は、Firefox、Internet Explorer、Safari、Chrome などのさまざまなブラウザで動作する包括的なソリューションを提供することを目的としています。

既存のソリューション

Firefox および Internet Explorer の場合、既存のソリューションには、それぞれ getAsBinary() メソッドまたは ieReadFile() ActiveX オブジェクトの利用が含まれます。ただし、これらのメソッドはブラウザ固有であり、ブラウザ間の互換性がありません。

クロスブラウザ サポート用のファイル API

このソリューションの初期開発以来、ファイルAPI は、最新のブラウザーの標準機能として登場しました。 File API は、非同期読み取り、バイナリ ファイルのサポート、テキスト エンコーディングのデコードなど、ファイル処理のためのより堅牢なインターフェイスを提供します。

File API の使用方法

File API を使用してファイルの内容を読み取るには、次の手順に従います。

1. 選択したファイルを<入力タイプ="ファイル">
2. FileReader オブジェクトを作成します。
3. ファイルと必要なエンコーディングを指定して、FileReader で readAsText() を呼び出します。
4. ファイルの内容を受け取るロード イベントをリッスンします。文字列。

これは更新されたコードです例:

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

Safari と Chrome の制限

File API はブラウザ間のソリューションを提供しますが、Safari と Chrome には制限があることに注意することが重要です。過去の API のサポート。ただし、最近のブラウザ バージョンの導入により、この制限は大幅に解決されました。

以上がすべてのブラウザーで JavaScript を使用してクライアント側でファイルの内容を読み取るにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。