更新 import-class.html

app/templates/import-class.html

@@ -68,8 +68,11 @@
                     </fieldset>
                 </div>
                 <div class="layui-col-md12" style="padding-top: 20px;">
+                    <!-- 隐藏的文件输入，用户选择文件 -->
+                    <input type="file" id="excelFile" style="display:none;" accept=".xlsx, .xls">
+                    <!-- 上传按钮 -->
                     <button type="button" class="layui-btn" id="uploadExcel">上传Excel文件</button>
-                    <!-- 可以添加一个下载模板的链接 -->
+                    <!-- 下载模板链接 -->
                     <a href="/files/template.xlsx" class="layui-btn layui-btn-primary">下载模板</a>
                 </div>
             </div>
@@ -82,6 +85,52 @@
 <script src="/static/js/menu.js"></script>
 <script src="/static/js/logout.js"></script>
 <script>
+    // 获取上传按钮和文件输入元素
+    var uploadBtn = document.getElementById('uploadExcel');
+    var fileInput = document.getElementById('excelFile');
+
+    // 当点击上传按钮时触发文件输入的点击事件
+    uploadBtn.addEventListener('click', function () {
+        fileInput.click();
+    });
+
+    // 处理文件选择事件
+    fileInput.addEventListener('change', function () {
+        var file = this.files[0]; // 获取文件对象
+        if (file) {
+            // 检查文件类型
+            var fileName = file.name;
+            var fileExt = fileName.split('.').pop().toLowerCase();
+            if (fileExt === 'xlsx' || fileExt === 'xls') {
+                // 使用 FormData 上传文件
+                var formData = new FormData();
+                formData.append('file', file, fileName);  // 'file' 是你的服务器端期待的字段名
+
+                // 使用 fetch 发送文件
+                fetch('/api/receive-excel', {
+                    method: 'POST',
+                    body: formData  // 传递表单数据
+                })
+                    .then(response => {
+                        if (response.ok) {
+                            return response.json();  // 如果上传成功，解析JSON响应
+                        }
+                        throw new Error('Network response was not ok.');  // 如果上传失败，抛出错误
+                    })
+                    .then(data => {
+                        // 处理响应数据
+                        layer.msg('上传成功!'); // 弹出成功消息
+                    })
+                    .catch(error => {
+                        console.error('Upload failed:', error);
+                        alert("文件上传失败!");  // 弹出失败消息
+                    });
+            } else {
+                alert("请上传Excel文件!");
+            }
+        }
+    });
 </script>
+
 </body>
 </html>