当前位置：首页 > JavaScript

js实现表单上传

2026-03-15 21:33:32JavaScript

使用FormData对象实现表单上传

FormData对象可以方便地收集表单数据，并通过AJAX发送到服务器。以下是基本实现方式：

const form = document.getElementById('myForm');
form.addEventListener('submit', function(e) {
  e.preventDefault();

  const formData = new FormData(form);

  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
});

处理文件上传

对于包含文件输入的表单，FormData会自动处理文件数据：

<input type="file" id="fileInput" name="file">

const fileInput = document.getElementById('fileInput');
const uploadButton = document.getElementById('uploadButton');

uploadButton.addEventListener('click', () => {
  const file = fileInput.files[0];
  const formData = new FormData();
  formData.append('file', file);

  fetch('/upload', {
    method: 'POST',
    body: formData
  });
});

显示上传进度

使用XMLHttpRequest可以获取上传进度：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);

xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    const percentComplete = (e.loaded / e.total) * 100;
    console.log(percentComplete + '% uploaded');
  }
};

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('Upload complete');
  }
};

const formData = new FormData(form);
xhr.send(formData);

多文件上传处理

处理多个文件上传时，可以遍历文件列表：

const fileInput = document.getElementById('multiFileInput');
const formData = new FormData();

Array.from(fileInput.files).forEach((file, index) => {
  formData.append(`file${index}`, file);
});

fetch('/multi-upload', {
  method: 'POST',
  body: formData
});

添加额外数据

可以在FormData中添加非表单字段的数据：

const formData = new FormData(form);
formData.append('userId', '12345');
formData.append('timestamp', Date.now());

错误处理

完善的错误处理机制：

fetch('/upload', {
  method: 'POST',
  body: formData
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => console.log(data))
.catch(error => {
  console.error('Upload error:', error);
  // 显示错误信息给用户
});

服务器端处理示例(Node.js)

简单的Express服务器接收处理：

js实现表单上传

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

app.post('/upload', upload.single('file'), (req, res) => {
  console.log(req.file);  // 文件信息
  console.log(req.body);  // 其他表单字段
  res.json({ message: 'File uploaded successfully' });
});