如何在 JS 中上传文件 | JavaScript 中的文件上传程序 | JS

发布:2024-10-08 23:20 阅读:35 点赞: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, { header1 });

                // 在表格中显示数据
                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数据!