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>
登錄后復制






