JS上传Excel表格详细代码：含样式、AJAX、PHP处理
以下是一个简单的上传Excel表格的示例代码，包含样式、AJAX上传、后端PHP接收和处理数据等功能：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>上传Excel表格</title>
<style type='text/css'>
#upload-form {
padding: 20px;
border: 1px solid #ccc;
margin: 20px auto;
width: 400px;
text-align: center;
}
</style>
</head>
<body>
<div id='upload-form'>
<h2>上传Excel表格</h2>
<form id='form' enctype='multipart/form-data'>
<input type='file' name='file' id='file'>
<br><br>
<input type='submit' value='上传'>
</form>
<br>
<div id='result'></div>
</div>
<script src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
<script src='script.js'></script>
</body>
</html>
JavaScript代码：
$(document).ready(function() {
$('#form').submit(function(event) {
event.preventDefault();
var formData = new FormData(this);
$.ajax({
url: 'upload.php', // 后端PHP处理文件的路径
type: 'POST',
data: formData,
dataType: 'json',
cache: false,
contentType: false,
processData: false,
beforeSend: function() {
$('#result').html('<p>正在上传...</p>');
},
success: function(data) {
if (data.success) {
$('#result').html('<p>上传成功！</p>');
} else {
$('#result').html('<p>上传失败：' + data.msg + '</p>');
}
},
error: function(xhr, textStatus, errorThrown) {
$('#result').html('<p>上传出错：' + textStatus + '</p>');
}
});
});
});
PHP代码：
<?php
if ($_FILES['file']['error'] > 0) {
$msg = '上传出错：' . $_FILES['file']['error'];
$result = array('success' => false, 'msg' => $msg);
echo json_encode($result);
} else {
$file = $_FILES['file']['tmp_name'];
// 处理Excel表格数据
// ...
$result = array('success' => true);
echo json_encode($result);
}
?>
这个示例代码中，HTML代码定义了一个上传表单，包含一个文件选择框和一个提交按钮。JavaScript代码使用jQuery库来处理表单的提交，使用AJAX来上传文件并接收后端PHP的处理结果。PHP代码中，如果上传出错，则返回一个包含错误信息的JSON对象；否则，处理Excel表格数据并返回一个成功的JSON对象。注意，这个示例代码中的Excel表格数据处理部分需要根据具体需求进行编写。
原文地址: https://www.cveoy.top/t/topic/oeqP 著作权归作者所有。请勿转载和采集!