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