当前位置：首页 > JavaScript

js实现表单上传

2026-02-02 21:11:32JavaScript

使用原生JavaScript实现表单上传

通过HTML的<form>元素结合JavaScript的FormData对象实现文件上传功能。

创建一个包含文件输入的表单：

<form id="uploadForm">
  <input type="file" name="file" id="fileInput">
  <button type="submit">上传</button>
</form>

使用JavaScript处理表单提交：

document.getElementById('uploadForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];

  if (!file) {
    alert('请选择文件');
    return;
  }

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

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

使用XMLHttpRequest实现上传

通过XMLHttpRequest对象实现更底层的上传控制，适合需要进度监控的场景。

function uploadFile(file) {
  const xhr = new XMLHttpRequest();
  const formData = new FormData();
  formData.append('file', file);

  xhr.upload.addEventListener('progress', function(e) {
    const percent = Math.round((e.loaded / e.total) * 100);
    console.log(`上传进度: ${percent}%`);
  });

  xhr.addEventListener('load', function() {
    console.log('上传完成');
  });

  xhr.addEventListener('error', function() {
    console.error('上传出错');
  });

  xhr.open('POST', '/upload', true);
  xhr.send(formData);
}

实现多文件上传

修改HTML表单允许多文件选择，并在JavaScript中处理多个文件：

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

处理多文件上传的JavaScript代码：

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

for (let i = 0; i < files.length; i++) {
  formData.append('files[]', files[i]);
}

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

添加上传限制

可以在客户端添加文件类型和大小验证：

const MAX_SIZE = 5 * 1024 * 1024; // 5MB
const ALLOWED_TYPES = ['image/jpeg', 'image/png'];

function validateFile(file) {
  if (!ALLOWED_TYPES.includes(file.type)) {
    alert('只支持JPEG和PNG格式');
    return false;
  }

  if (file.size > MAX_SIZE) {
    alert('文件大小不能超过5MB');
    return false;
  }

  return true;
}

显示上传进度

结合HTML5的进度条元素显示上传进度：

<progress id="uploadProgress" value="0" max="100"></progress>

更新JavaScript代码：

xhr.upload.addEventListener('progress', function(e) {
  const percent = Math.round((e.loaded / e.total) * 100);
  document.getElementById('uploadProgress').value = percent;
});

服务器端响应处理

处理服务器返回的响应数据：

js实现表单上传

fetch('/upload', {
  method: 'POST',
  body: formData
})
.then(response => {
  if (!response.ok) {
    throw new Error('上传失败');
  }
  return response.json();
})
.then(data => {
  console.log('上传成功:', data);
  if (data.url) {
    document.getElementById('preview').src = data.url;
  }
})
.catch(error => {
  console.error('上传错误:', error);
  alert('上传失败: ' + error.message);
});