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

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

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

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

手順:

1. HTML ファイルの作成:

   • テキスト エディターを使用します (メモ帳や Sublime Text など）を使用して、新しいファイルを作成します。
   • .html 拡張子を付けてファイルを保存します (例: myfile.html)。

2. jQuery のインポート:

   • jQuery は、HTML 要素の操作を容易にする JavaScript ライブラリです。
   • 次のコードを HTML ファイルの セクションに追加します:

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

3. 入力を作成しますfield:

   • <input> 要素を追加して、ユーザーが開くファイルを選択できるようにします:

   <input type="file">

4. ファイル選択イベントをリッスンする:

   • jQuery の change() イベントを使用してファイル選択をリッスンする:

   <script>
   $("input[type=file]").change(function() {
     // 文件选择后执行此函数
   });
   </script>

5. ファイル選択の処理:

   • イベント ハンドラー関数で、選択されたファイルを取得し、FileReader()# を使用します。 ## ファイルの内容を読み取るオブジェクト:

   var file = this.files[0];
   var reader = new FileReader();
   reader.onload = function() {
     // 读取的文件内容存储在 `reader.result` 中
   };
   reader.readAsText(file);

6. ファイルの内容を表示:

   ファイルの読み取り後コンテンツを Web ページに表示するには、HTML 要素 (
   • や

     など) を使用します。

     サンプルコード:

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

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