Bagaimana untuk membuka fail tempatan dalam html-html tutorial-php.cn

Bagaimana untuk membuka fail tempatan dalam html

下次还敢

Lepaskan： 2024-04-22 09:39:17

asal

1257 orang telah melayarinya

<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>
```
Salin selepas log masuk
<p>创建输入字段：
- 添加一个 <input> 元素，允许用户选择要打开的文件：
```
<code class="html"><input type="file"></code>
```
Salin selepas log masuk

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

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

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

Salin selepas log masuk

<p>处理文件选择：

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

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

Salin selepas log masuk

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

Salin selepas log masuk

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