ファイル システムに直接アクセスせずに、JavaScript でローカル ファイルにアクセスするにはどうすればよいですか?

JavaScript でのローカル ディスク ファイルへのアクセス

セキュリティ上の理由から、JavaScript でローカル ディスク ファイルを直接開くことは許可されていません。ローカル ファイルのデータにアクセスするには、代替方法が必要です。

ローカル ファイル アクセスに FileReader を使用する

1 つの方法は、FileReader API を利用することです。ファイルに直接アクセスすることなく、ファイルの内容を読み取ります。実装例は次のとおりです:

function readSingleFile(e) {
  var file = e.target.files[0];
  if (!file) {
    return;
  }
  var reader = new FileReader();
  reader.onload = function(e) {
    var contents = e.target.result;
    displayContents(contents);
  };
  reader.readAsText(file);
}

function displayContents(contents) {
  var element = document.getElementById('file-content');
  element.textContent = contents;
}

document.getElementById('file-input')
  .addEventListener('change', readSingleFile, false);

この例では:

• ID 'file-input' を持つファイル入力要素が定義されています。
• ファイルがファイル入力を使用して選択されると、「readSingleFile」関数がトリガーされます。
• FileReader オブジェクトは次の目的で使用されます。選択したファイルをテキストとして読み取ります。
• FileReader の 'onload' イベント ハンドラーは、ファイルの読み取り完了を処理するように定義されています。
• 'displayContents' 関数は、読み取られたファイルの内容を取得して表示します。 ID が「file-content」の HTML 要素内。

FileReader アプローチを使用すると、ローカル ファイル データにアクセスできます。クライアント側の JavaScript コード内でこれを使用すると、ファイルの内容をさらに処理したり表示したりできます。

以上がファイル システムに直接アクセスせずに、JavaScript でローカル ファイルにアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。