html怎麼開啟本機文件

HTML 可用於開啟本機文件，步驟如下：建立一個 .html 檔案並匯入 jQuery 庫。建立一個輸入字段，允許使用者選擇文件。監聽檔案選擇事件並使用 FileReader() 物件讀取檔案內容。將讀取的文件內容顯示到網頁上。

如何使用HTML 開啟本機檔案

HTML（超文本標記語言）通常用於建立網頁，但它也可以用來讀取和顯示本地文件。

步驟：

1. 建立HTML 檔案：

   • 使用文字編輯器（例如記事本或Sublime Text）會建立一個新的檔案。
   • 儲存檔案以 .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>) 將其顯示到網頁上。

     範例程式碼：

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