JavaScript はどのようにしてさまざまなブラウザーでローカル ファイルの内容を読み取ることができますか?

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

ブラウザを使用してクライアント マシンからファイル コンテンツを読み取ろうとする場合、スクリプトのみこのソリューションは、Firefox および Internet Explorer 用に開発されました。このソリューションは、Firefox の File API と Internet Explorer の ActiveXObject を利用します。

Firefox のファイル API

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

Internet Explorer の ActiveXObject

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

クロスブラウザサポート

ただし、Safari や Chrome などの他のブラウザで上記の方法を使用してこのタスクを実行する方法は知られていません。これらのブラウザに実装されているファイル API は、ファイル名とファイル サイズへのアクセスのみを提供し、コンテンツを読み取る機能はありません。

ファイル API アップデート

ファイルAPI はその後標準化され、IE 10 以降を含むほとんどの最新ブラウザに実装されました。この API は、非同期ファイルの読み取り、バイナリ ファイルの処理、およびテキスト エンコーディングのデコードをサポートしています。

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 および HTML 5 提案

または、必要に応じて、送信することもできます。パッチを適用するか、HTML 5 に組み込むための Mozilla API を提案して、ブラウザ間の互換性の可能性を高めます。将来的には。

以上がJavaScript はどのようにしてさまざまなブラウザーでローカル ファイルの内容を読み取ることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。