JS 上传 Excel 表格并解析数据 - 完整代码示例 - 常规

这里是一个利用 JS 上传 Excel 表格的详细代码示例，包括样式、Ajax 上传和后端 PHP 接收处理数据等功能。

HTML 代码：

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>上传 Excel 表格</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    #upload-form {
      margin: 50px auto;
      width: 500px;
      text-align: center;
    }
    #upload-form label {
      display: block;
      margin: 20px 0;
      font-size: 18px;
      font-weight: bold;
    }
    #upload-form input[type='file'] {
      display: block;
      margin: 0 auto;
      padding: 10px;
      font-size: 16px;
    }
    #upload-form button {
      display: block;
      margin: 20px auto;
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4CAF50;
      color: #FFF;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    #message {
      margin: 50px auto;
      width: 500px;
      text-align: center;
    }
    #message p {
      margin: 20px 0;
      font-size: 18px;
      font-weight: bold;
    }
    #message table {
      margin: 20px auto;
      width: 80%;
      border-collapse: collapse;
    }
    #message table th,
    #message table td {
      padding: 10px;
      border: 1px solid #CCC;
    }
  </style>
</head>
<body>
  <div id='upload-form'>
    <form id='form' enctype='multipart/form-data'>
      <label for='file'>选择 Excel 表格文件：</label>
      <input type='file' id='file' name='file' accept='.xls,.xlsx'>
      <button type='submit'>上传</button>
    </form>
  </div>
  <div id='message'></div>
  <script src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
  <script src='script.js'></script>
</body>
</html>

JS 代码：

$(document).ready(function() {
  $('#form').submit(function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    var formData = new FormData($(this)[0]); // 创建 FormData 对象
    $.ajax({
      url: 'upload.php', // 后端处理文件的 PHP 脚本
      type: 'POST',
      data: formData,
      async: false,
      cache: false,
      contentType: false,
      processData: false,
      success: function(response) {
        $('#message').html(response); // 显示处理结果
      },
      error: function() {
        alert('上传失败，请重试！');
      }
    });
  });
});

PHP 代码 (upload.php)：

<?php
if(isset($_FILES['file'])) {
  $file = $_FILES['file'];
  $filename = $file['name'];
  $filetype = $file['type'];
  $filesize = $file['size'];
  $filetmpname = $file['tmp_name'];
  $fileerror = $file['error'];
  if($fileerror == UPLOAD_ERR_OK) {
    // 如果文件上传成功
    require_once 'Classes/PHPExcel.php'; // 引入PHPExcel类库
    $excelReader = PHPExcel_IOFactory::createReaderForFile($filetmpname); // 创建PHPExcel对象
    $excelReader->setReadDataOnly(true);
    $excelObj = $excelReader->load($filetmpname); // 加载Excel文件
    $worksheet = $excelObj->getActiveSheet(); // 获取当前工作表
    $lastRow = $worksheet->getHighestRow(); // 获取最后一行
    $lastColumn = $worksheet->getHighestColumn(); // 获取最后一列
    $lastColumnIndex = PHPExcel_Cell::columnIndexFromString($lastColumn); // 获取最后一列的索引
    $tableHtml = '<table><thead><tr>'; // 生成HTML表格
    for($col = 0; $col < $lastColumnIndex; $col++) {
      $tableHtml .= '<th>'.$worksheet->getCellByColumnAndRow($col, 1)->getValue().'</th>';
    }
    $tableHtml .= '</tr></thead><tbody>';
    for($row = 2; $row <= $lastRow; $row++) {
      $tableHtml .= '<tr>';
      for($col = 0; $col < $lastColumnIndex; $col++) {
        $tableHtml .= '<td>'.$worksheet->getCellByColumnAndRow($col, $row)->getValue().'</td>';
      }
      $tableHtml .= '</tr>';
    }
    $tableHtml .= '</tbody></table>';
    echo '<p>文件名：'.$filename.'</p>';
    echo '<p>文件类型：'.$filetype.'</p>';
    echo '<p>文件大小：'.($filesize/1024).'KB</p>';
    echo '<p>上传成功！</p>';
    echo $tableHtml; // 显示HTML表格
  } else {
    echo '<p>上传失败，请重试！</p>';
  }
}
?>

需要注意的几点：

需要引入 jQuery 和 PHPExcel 库。
表单提交时需要阻止默认提交行为。
FormData 对象中需要传入表单元素的 DOM 对象，即 $(this)[0]。
PHPExcel 类库需要单独下载并放置在服务器的合适位置，然后在 PHP 代码中引入。
PHPExcel 类库的使用需要参考其官方文档或示例。