HTML を使用すると、次のようにローカル ファイルを開くことができます。 .html ファイルを作成し、jQuery ライブラリをインポートします。ユーザーがファイルを選択できるようにする入力フィールドを作成します。ファイル選択イベントをリッスンし、FileReader() オブジェクトを使用してファイルの内容を読み取ります。読み込んだファイルの内容をWebページ上に表示します。
HTML を使用してローカル ファイルを開く方法
HTML (ハイパーテキスト マークアップ言語) は、Web の作成によく使用されます。ページだけでなく、ローカル ファイルの読み取りと表示にも使用できます。
手順:
HTML ファイルの作成:
.html
拡張子を付けてファイルを保存します (例: myfile.html
)。 jQuery のインポート:
<head>
セクションに追加します: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
入力を作成しますfield:
<input>
要素を追加して、ユーザーが開くファイルを選択できるようにします: <input type="file">
ファイル選択イベントをリッスンする:
change()
イベントを使用してファイル選択をリッスンする: <script> $("input[type=file]").change(function() { // 文件选择后执行此函数 }); </script>
ファイル選択の処理:
FileReader()# を使用します。 ## ファイルの内容を読み取るオブジェクト:
var file = this.files[0]; var reader = new FileReader(); reader.onload = function() { // 读取的文件内容存储在 `reader.result` 中 }; reader.readAsText(file);
ファイルの内容を表示:
や
など) を使用します。
サンプルコード:
<head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <input type="file"> <script> $("input[type=file]").change(function() { var file = this.files[0]; var reader = new FileReader(); reader.onload = function() { $("#result").html(reader.result); }; reader.readAsText(file); }); </script>