如何在 JS 中上传文件 | JavaScript 中的文件上传程序 | JS
阅读：41
点赞：0
一. 介绍
在这篇文章中，我们将学习如何创建一个JavaScript程序，允许用户上传Excel或CSV文件，并将数据提取并显示在网页上。我们将使用SheetJS（xlsx.js）库来读取Excel文件，并用纯JavaScript处理CSV文件。
二. 使用SheetJS处理Excel文件
1. 安装SheetJS（xlsx.js）
在开始之前，您需要在HTML文件中引入SheetJS库。
2. 创建文件上传的HTML表单
下面是用于上传Excel文件的基本HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Excel 数据上传</title>
</head>
<body>
<h1>上传 Excel 文件</h1>
<input type="file" id="upload" />
<table id="excelDataTable" border="1">
<!-- 数据将动态注入在这里 -->
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
// 监听文件输入变化
document.getElementById('upload').addEventListener('change', handleFile, false);
function handleFile(e) {
const file = e.target.files[0]; // 获取上传的文件
const reader = new FileReader(); // 创建文件读取器
reader.onload = function(event) {
const data = new Uint8Array(event.target.result); // 读取文件数据
const workbook = XLSX.read(data, { type: 'array' }); // 解析Excel工作簿
// 获取第一个工作表
const sheetName = workbook.SheetNames[0]; // 获取第一个工作表的名称
const worksheet = workbook.Sheets[sheetName]; // 获取对应工作表
// 将工作表转换为JSON格式
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
// 在表格中显示数据
displayData(jsonData);
};
reader.readAsArrayBuffer(file); // 以ArrayBuffer格式读取文件
}
function displayData(data) {
const table = document.getElementById('excelDataTable'); // 获取表格元素
table.innerHTML = ''; // 清除现有数据
// 遍历行和单元格
data.forEach((row) => {
let rowElement = document.createElement('tr'); // 创建行元素
row.forEach((cell) => {
let cellElement = document.createElement('td'); // 创建单元格元素
cellElement.textContent = cell; // 设置单元格内容
rowElement.appendChild(cellElement); // 将单元格添加到行中
});
table.appendChild(rowElement); // 将行添加到表格中
});
}
</script>
</body>
</html>
代码解释
-
文件上传：用户可以通过 <input type="file">选择Excel文件。 -
文件读取：使用FileReader API读取上传的文件，并将其作为ArrayBuffer格式读取。 -
SheetJS：使用SheetJS库解析Excel文件并将其转换为JSON格式。 -
表格显示：数据通过动态生成HTML表格的方式显示出来。
三. 处理CSV文件
1. HTML + JavaScript（用于CSV文件）
您可以使用以下代码处理CSV文件上传并显示其内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSV 文件上传</title>
</head>
<body>
<h1>上传 CSV 文件</h1>
<input type="file" id="upload" />
<table id="csvDataTable" border="1">
<!-- 数据将动态注入在这里 -->
</table>
<script>
document.getElementById('upload').addEventListener('change', function(e) {
const file = e.target.files[0]; // 获取上传的CSV文件
if (!file.name.endsWith('.csv')) { // 检查文件扩展名
alert('请上传一个CSV文件！'); // 提示用户
return; // 结束函数
}
const reader = new FileReader(); // 创建文件读取器
reader.onload = function(event) {
const csvData = event.target.result; // 获取CSV文件内容
parseCSV(csvData); // 解析CSV数据
};
reader.readAsText(file); // 以文本格式读取文件
});
function parseCSV(csvData) {
const rows = csvData.split('\n'); // 按行分割CSV数据
const table = document.getElementById('csvDataTable'); // 获取表格元素
table.innerHTML = ''; // 清除现有表格内容
rows.forEach(row => {
const cells = row.split(','); // 按逗号分割每行数据
const rowElement = document.createElement('tr'); // 创建行元素
cells.forEach(cell => {
const cellElement = document.createElement('td'); // 创建单元格元素
cellElement.textContent = cell; // 设置单元格内容
rowElement.appendChild(cellElement); // 将单元格添加到行中
});
table.appendChild(rowElement); // 将行添加到表格中
});
}
</script>
</body>
</html>
代码解释
-
文件上传：用户通过 <input type="file">选择CSV文件。 -
文件读取：使用FileReader API读取CSV文件，并以文本格式读取。 -
CSV解析：将CSV数据按行和列分割并动态生成HTML表格进行展示。
四. 总结
以上展示了如何使用JavaScript处理Excel和CSV文件上传，并将其数据动态显示在网页上。使用SheetJS库可以轻松解析Excel文件，而对于CSV文件，JavaScript提供了简单的字符串处理能力，无需使用外部库。选择CSV文件更方便，因为它的格式简单，易于解析。
希望这篇文章对您有所帮助，让您能够更好地处理Excel和CSV数据！