当前位置：首页 > JavaScript

js实现文件的上传

2026-04-03 23:09:35JavaScript

使用HTML表单实现文件上传

在HTML中创建一个表单，设置enctype为multipart/form-data，并包含一个input类型为file的元素：

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

通过JavaScript处理上传

使用FormData对象收集文件数据，并通过fetch或XMLHttpRequest发送到服务器：

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

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

显示上传进度

使用XMLHttpRequest的upload事件监听进度：

const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
  if (e.lengthComputable) {
    const percent = (e.loaded / e.total) * 100;
    console.log(`上传进度: ${percent.toFixed(2)}%`);
  }
});
xhr.open('POST', '/upload');
xhr.send(formData);

多文件上传处理

通过multiple属性允许选择多个文件，并遍历添加到FormData：

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

const fileInput = document.getElementById('fileInput');
const formData = new FormData();
Array.from(fileInput.files).forEach(file => {
  formData.append('files[]', file);
});

文件类型和大小验证

在上传前进行客户端验证：

js实现文件的上传

const file = fileInput.files[0];
const validTypes = ['image/jpeg', 'image/png'];
const maxSize = 5 * 1024 * 1024; // 5MB

if (!validTypes.includes(file.type)) {
  alert('仅支持JPEG/PNG格式');
  return;
}

if (file.size > maxSize) {
  alert('文件大小超过5MB限制');
  return;
}