使用来自文件上传类型的名称更新div

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" id="fileInput" name="fileInput">
  <button type="submit">上传文件</button>
</form>

<div id="resultDiv"></div>

<script>
  document.getElementById('uploadForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止表单默认提交行为

    var fileInput = document.getElementById('fileInput');
    var file = fileInput.files[0];

    var formData = new FormData();
    formData.append('file', file);

    // 发送文件上传请求
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        var result = JSON.parse(xhr.responseText);
        var resultDiv = document.getElementById('resultDiv');
        resultDiv.innerHTML = '上传成功，文件名：' + result.fileName;
      } else {
        console.error('文件上传失败');
      }
    };
    xhr.send(formData);
  });
</script>

const express = require('express');
const multer = require('multer');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  // 处理文件上传逻辑
  const fileName = req.file.filename;
  // 可以根据需要进行文件保存、数据库记录等操作

  res.json({ fileName: fileName });
});

app.listen(3000, () => {
  console.log('服务器已启动');
});