JS 上传 Excel 表格详细代码示例 - 包含样式、AJAX 上传、PHP 后端处理 - 常规

以下是一个利用 JS 上传 Excel 表格的详细代码示例，包含 HTML 结构、CSS 样式、AJAX 上传和 PHP 后端接收处理数据等功能。

HTML 代码

<!DOCTYPE html>
<html>
<head>
	<title>Excel 上传</title>
	<style>
		.container {
			width: 500px;
			margin: 0 auto;
			padding-top: 50px;
		}
		.form-group {
			margin-bottom: 20px;
		}
		.form-group label {
			display: block;
			font-size: 16px;
			margin-bottom: 5px;
			font-weight: bold;
		}
		.form-group input[type='file'] {
			margin-top: 5px;
		}
		.btn {
			display: inline-block;
			padding: 8px 16px;
			background-color: #007bff;
			color: #fff;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 16px;
		}
		.btn:hover {
			background-color: #0069d9;
		}
		.alert {
			padding: 8px 16px;
			background-color: #f8d7da;
			color: #721c24;
			border-radius: 4px;
			margin-bottom: 20px;
		}
		.alert-danger {
			background-color: #f8d7da;
			color: #721c24;
		}
		.alert-success {
			background-color: #d4edda;
			color: #155724;
		}
	</style>
</head>
<body>
	<div class='container'>
		<h1>Excel 上传</h1>
		<div class='form-group'>
			<label for='excelFile'>选择 Excel 文件：</label>
			<input type='file' name='excelFile' id='excelFile'>
		</div>
		<button class='btn' id='uploadBtn'>上传</button>
		<div id='alertContainer'></div>
	</div>
	<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
	<script src='upload.js'></script>
</body>
</html>

JS 代码

$(function() {
    $('#uploadBtn').on('click', function() {
        var formData = new FormData();
        var excelFile = $('#excelFile')[0].files[0];
        formData.append('excelFile', excelFile);
        $.ajax({
            url: 'upload.php',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            beforeSend: function() {
                $('#alertContainer').empty();
            },
            success: function(response) {
                if (response.success) {
                    $('#alertContainer').html('<div class='alert alert-success'>Excel 上传成功！</div>');
                } else {
                    $('#alertContainer').html('<div class='alert alert-danger'>' + response.message + '</div>');
                }
            },
            error: function(xhr, status, error) {
                $('#alertContainer').html('<div class='alert alert-danger'>Excel 上传失败！</div>');
            }
        });
    });
});

PHP 代码

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (!isset($_FILES['excelFile'])) {
        $response = array('success' => false, 'message' => '没有上传 Excel 文件！');
        echo json_encode($response);
        exit;
    }

    $allowedExtensions = array('xls', 'xlsx');
    $fileExtension = pathinfo($_FILES['excelFile']['name'], PATHINFO_EXTENSION);
    if (!in_array($fileExtension, $allowedExtensions)) {
        $response = array('success' => false, 'message' => '只允许上传 xls 或 xlsx 格式的 Excel 文件！');
        echo json_encode($response);
        exit;
    }

    $uploadDir = 'uploads/';
    $uploadFile = $uploadDir . basename($_FILES['excelFile']['name']);
    if (!move_uploaded_file($_FILES['excelFile']['tmp_name'], $uploadFile)) {
        $response = array('success' => false, 'message' => '上传 Excel 文件失败！');
        echo json_encode($response);
        exit;
    }

    // 处理 Excel 文件数据

    $response = array('success' => true);
    echo json_encode($response);
    exit;
}
?>

代码说明：

HTML 代码： 创建一个简单的表单，包含一个文件上传输入框和一个上传按钮。
JS 代码： 使用 jQuery 监听上传按钮的点击事件，使用 FormData 对象封装上传文件，并使用 AJAX 发送请求到 PHP 后端。
PHP 代码： 接收 AJAX 请求，验证文件类型，将上传的文件移动到指定的目录，并处理 Excel 文件数据。

注意事项：

需要安装 PHP 的 PHPExcel 库来处理 Excel 文件数据，或者使用其他第三方库。
需要根据实际情况修改 uploadDir 和 allowedExtensions 的值。
需要在 PHP 代码中添加处理 Excel 文件数据的逻辑。
以上代码示例仅供参考，实际应用中需要根据具体的需求进行修改和完善。

其他功能：

可以根据需求添加其他功能，例如：

文件大小限制
文件类型验证
上传进度显示
上传后提示信息
上传成功后的操作
等等

希望以上代码示例能帮助您快速实现 JS 上传 Excel 表格的功能。

JS 上传 Excel 表格详细代码示例 - 包含样式、AJAX 上传、PHP 后端处理