Bagaimana untuk membuka fail tempatan dalam html

HTML boleh digunakan untuk membuka fail setempat, ikuti langkah berikut: Cipta fail .html dan import pustaka jQuery. Cipta medan input yang membolehkan pengguna memilih fail. Dengar acara pemilihan fail dan gunakan objek FileReader() untuk membaca kandungan fail. Paparkan kandungan fail yang dibaca pada halaman web.

Cara membuka fail tempatan menggunakan HTML

HTML (Bahasa Penanda Hiperteks) biasanya digunakan untuk mencipta halaman web, tetapi ia juga boleh digunakan untuk membaca dan memaparkan fail tempatan.

Langkah:

1. Buat fail HTML:

   • Buat fail baharu menggunakan penyunting teks seperti Notepad atau Teks Sublime.
   • Simpan fail dengan sambungan .html (contohnya: myfile.html). .html 扩展名（例如：myfile.html）。

2. 导入 jQuery：

   • jQuery 是一个 JavaScript 库，使操作 HTML 元素更加容易。
   • 将以下代码添加到 HTML 文件的 部分：

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

3. 创建输入字段：

   • 添加一个 <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. 显示文件内容：

   • 读取文件内容后，可以使用 HTML 元素（例如 <div> 或 <code><p></p>

     Import jQuery:

     🎜jQuery ialah perpustakaan JavaScript yang memudahkan memanipulasi elemen HTML. 🎜🎜Tambahkan kod berikut pada bahagian fail HTML anda: 🎜🎜

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

     🎜🎜🎜🎜Buat medan input: 🎜🎜🎜🎜Tambahkan elemen yang membolehkan pengguna memilih fail untuk dibuka: 🎜🎜rrreee🎜🎜🎜🎜Dengar acara pemilihan fail: 🎜🎜🎜🎜Gunakan acara change() jQuery untuk mendengar fail pilihan: 🎜🎜rrreee🎜 🎜🎜🎜Kendalikan pemilihan fail: 🎜🎜🎜🎜Dalam fungsi pengendali acara, dapatkan fail yang dipilih dan gunakan objek FileReader() untuk membaca kandungan fail: 🎜 🎜rrreee🎜🎜🎜🎜Paparkan kandungan fail : 🎜🎜🎜🎜Selepas membaca kandungan fail, anda boleh menggunakan elemen HTML (seperti <div> atau <code><p> kod>) untuk memaparkannya pada halaman web. 🎜🎜🎜🎜🎜🎜Contoh kod: 🎜🎜rrreee</p>