在 html 中，通過 file api 讀取本地文件。步驟包括：使用 <input> 元素創建文件選擇器。給文件選擇器添加事件監聽器。在事件處理程序中，使用 filereader 對象讀取文件。讀取成功后，result 屬性包含文件內容，可根據需要處理。
如何使用 HTML 讀取本地文件
在 HTML 中，讀取本地文件主要通過使用 File API。File API 是一組 JavaScript API，允許網頁從用戶設備讀取文件。
所需步驟：
使用 <input> 元素創建文件選擇器：
<input type="file">
給文件選擇器添加事件監聽器：
<code class="javascript">const input = document.querySelector('input[type="file"]');
input.addEventListener('change', handleFileSelect);</code>
登錄后復制
在事件處理程序中讀取文件：
<code class="javascript">function handleFileSelect(event) {
const files = event.target.files;
const reader = new FileReader();
reader.onload = function() {
// 讀取成功后，`result` 屬性將包含文件的內容。
const content = reader.result;
// 對文件內容執行所需的處理。
};
reader.readAsText(files[0]);
}</code>
登錄后復制
示例代碼：
<code class="html"><form>
<input type="file" id="file-input"><button type="submit">讀取文件</button>
</form>
<script>
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', function(event) {
const files = event.target.files;
const reader = new FileReader();
reader.onload = function() {
const content = reader.result;
console.log(content);
};
reader.readAsText(files[0]);
});
</script></code>
登錄后復制
注意事項：
File API 僅適用于 HTML5 瀏覽器。
讀取本地文件需要用戶明確授權。
瀏覽器對文件大小和類型有特定的限制。
謹慎使用 File API，因為它可能造成安全風險。
