Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuka fail tempatan dalam html

Bagaimana untuk membuka fail tempatan dalam html

下次还敢asal: 2024-04-22 09:39:171121semak imbas

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

<p>

Bagaimana untuk membuka fail tempatan dalam html

<p>Cara membuka fail tempatan menggunakan HTML

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

<p>Langkah:

<p>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）。
<p>导入 jQuery：
- jQuery 是一个 JavaScript 库，使操作 HTML 元素更加容易。
- 将以下代码添加到 HTML 文件的 <head> 部分：
```
<code class="html"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script></code>
```
<p>创建输入字段：
- 添加一个 <input> 元素，允许用户选择要打开的文件：
```
<code class="html"><input type="file"></code>
```

<p>监听文件选择事件：

使用 jQuery 的 change() 事件来监听文件选择：

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

<p>处理文件选择：

在事件处理函数中，获取所选文件并使用 FileReader() 对象读取文件的内容：

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

<p>显示文件内容：
- 读取文件内容后，可以使用 HTML 元素（例如 <div> 或 <p>

<p>Import jQuery:

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

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

🎜🎜🎜🎜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 <p> kod>) untuk memaparkannya pada halaman web. 🎜🎜🎜🎜🎜🎜Contoh kod: 🎜🎜rrreee

Atas ialah kandungan terperinci Bagaimana untuk membuka fail tempatan dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery html 对象事件 input sublime text

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk membuka antara muka kod dalam htmlArtikel seterusnya：Bagaimana untuk membuka antara muka kod dalam html

Artikel berkaitan

Lihat lagi