ChatGpt生成网页应用，实现上传文件到服务器并保存上传记录的功能

使用 HTML 和 JavaScript 实现文件上传功能

1. 简介

在现代 web 开发中，实现文件上传功能是一个常见的需求。本文将介绍如何使用 HTML、CSS 和 JavaScript 创建一个支持 .obj 和 .jpg 文件上传的网页应用，并且展示上传进度以及上传完成后的文件信息。用户可以逐个选择文件并上传，最后将上传成功的文件信息通过 JSON 发送到服务器。页面效果：在这里插入图片描述

2. 开发环境

HTML5
CSS3
JavaScript (ES6)

3. 对话过程

我们从基础的文件上传功能开始，逐步改进页面的用户界面和功能，实现选择文件、显示进度、上传文件、展示上传结果等功能。以下是最终的 HTML、CSS 和 JavaScript 代码。

HTML 文件 (index.html)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="uploadContainer">
        <label for="fileInput">选择文件:</label>
        <input type="file" id="fileInput" multiple>
        <button id="uploadButton">上传文件</button>
        <div id="progressWrapper"></div>
        <div id="response">
            <h2>错误信息</h2>
        </div>
        <table id="fileTable">
            <thead>
                <tr>
                    <th>文件名</th>
                    <th>文件类型</th>
                    <th>文件编号</th>
                </tr>
            </thead>
            <tbody>