html無法直接讀取文本文件。可以通過javascript使用filereader api實現:1. 獲取文件輸入元素;2. 監聽文件選擇事件;3. 創建一個filereader對象;4. 監聽加載完成事件;5. 獲取文件內容;6. 在事件處理器中處理讀取到的文本。
如何從 HTML 中讀取文本文件
HTML 中無法直接讀取文本文件,但可以通過 JavaScript 使用 FileReader
API 實現。
// 獲取文件輸入元素 const fileInput = document.querySelector('input[type=file]'); // 監聽文件選擇事件 fileInput.addEventListener('change', (e) => { // 獲取選中的文件 const file = e.target.files[0]; // 創建一個新的 FileReader 對象 const reader = new FileReader(); // 監聽加載完成事件 reader.onload = (e) => { // 獲取文件內容 const text = e.target.result; // 在這里處理讀取到的文本 console.log(text); }; // 開始讀取文件 reader.readAsText(file); });
登錄后復制
實戰案例:讀取用戶選擇的 CSV 文件
<input type="file" accept=".csv" id="csv-input"> <script> const csvInput = document.querySelector('#csv-input'); csvInput.addEventListener('change', (e) => { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = (e) => { const csvData = e.target.result; // 將 CSV 數據解析為數組 const dataArray = csvData.split('\n'); // 遍歷數組并打印每個元素 dataArray.forEach((row) => { console.log(row); }); }; reader.readAsText(file); }); </script>
登錄后復制