js实现文件上传

2026-04-03 18:08:26JavaScript

文件上传基础实现

使用HTML的<input type="file">元素结合JavaScript的File API实现基础文件上传功能：

<input type="file" id="fileInput">
<button onclick="uploadFile()">上传</button>

function uploadFile() {
  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));
}

多文件上传支持

通过添加multiple属性并调整代码实现多文件选择：

js实现文件上传

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

function uploadFiles() {
  const fileInput = document.getElementById('fileInput');
  const files = fileInput.files;

  if (files.length === 0) {
    alert('请选择文件');
    return;
  }

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

  // 其余代码与单文件上传相同
}

文件类型和大小验证

在提交前对文件进行验证：

function validateFile(file) {
  // 允许的MIME类型
  const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];

  // 最大文件大小5MB
  const maxSize = 5 * 1024 * 1024;

  if (!allowedTypes.includes(file.type)) {
    alert('不支持的文件类型');
    return false;
  }

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

  return true;
}

进度显示实现

使用XMLHttpRequest显示上传进度：

js实现文件上传

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

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

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

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

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

拖放上传实现

添加拖放区域支持拖放上传：

<div id="dropArea" style="border: 2px dashed #ccc; padding: 20px;">
  拖放文件到此处
</div>

const dropArea = document.getElementById('dropArea');

dropArea.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropArea.style.borderColor = '#666';
});

dropArea.addEventListener('dragleave', () => {
  dropArea.style.borderColor = '#ccc';
});

dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  dropArea.style.borderColor = '#ccc';

  const files = e.dataTransfer.files;
  if (files.length > 0) {
    uploadFile(files[0]);
  }
});

前端预览实现

在上传前预览图片文件：

function previewImage(file) {
  const reader = new FileReader();
  const preview = document.getElementById('imagePreview');

  reader.onload = (e) => {
    preview.src = e.target.result;
    preview.style.display = 'block';
  };

  reader.readAsDataURL(file);
}

// 在文件选择后调用
fileInput.addEventListener('change', () => {
  if (fileInput.files[0]) {
    previewImage(fileInput.files[0]);
  }
});