ホームページ > 記事 > ウェブフロントエンド > ローカルファイルをHTMLで開く方法

ローカルファイルをHTMLで開く方法

下次还敢オリジナル: 2024-04-22 09:39:171121ブラウズ

HTML を使用すると、次のようにローカルファイルを開くことができます。 .html ファイルを作成し、jQuery ライブラリをインポートします。ユーザーがファイルを選択できるようにする入力フィールドを作成します。ファイル選択イベントをリッスンし、FileReader() オブジェクトを使用してファイルの内容を読み取ります。読み込んだファイルの内容をWebページ上に表示します。

ローカルファイルをHTMLで開く方法

HTML を使用してローカルファイルを開く方法

HTML (ハイパーテキストマークアップ言語) は、Web の作成によく使用されます。ページだけでなく、ローカルファイルの読み取りと表示にも使用できます。

手順:

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

サンプルコード:

<code class="html"><!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <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>

  <div id="result"></div>
</body>
</html></code>

以上がローカルファイルをHTMLで開く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript jquery html 对象事件 input sublime text

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTMLでコードインターフェイスを開く方法次の記事：HTMLでコードインターフェイスを開く方法

続きを見る