js实现文件的上传

2026-02-28 22:42:22JavaScript

使用原生JavaScript实现文件上传

创建文件上传表单，包含一个<input type="file">元素

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

通过JavaScript获取文件对象并上传

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);
  });
}

使用XMLHttpRequest实现文件上传

创建XMLHttpRequest对象发送文件

js实现文件的上传

function uploadWithXHR() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];

  if (!file) return;

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

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

  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      const percentComplete = (e.loaded / e.total) * 100;
      console.log('上传进度:', percentComplete + '%');
    }
  };

  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('上传完成');
    }
  };

  xhr.send(formData);
}

实现多文件上传

修改HTML允许选择多个文件

<input type="file" id="multiFileInput" multiple>
<button onclick="uploadMultipleFiles()">上传多个文件</button>

JavaScript处理多个文件上传

js实现文件的上传

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

  if (files.length === 0) return;

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

  fetch('/multi-upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('多文件上传成功:', data);
  });
}

添加文件类型和大小验证

在文件上传前进行验证

function validateAndUpload() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];

  if (!file) return;

  // 允许的文件类型
  const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
  // 最大文件大小5MB
  const maxSize = 5 * 1024 * 1024;

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

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

  // 验证通过后上传
  uploadFile();
}

显示上传进度

添加进度条显示上传进度

<div id="progressContainer" style="display: none;">
  <progress id="uploadProgress" value="0" max="100"></progress>
  <span id="progressPercent">0%</span>
</div>

更新JavaScript代码显示进度

function uploadWithProgress() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  const progressContainer = document.getElementById('progressContainer');
  const progressBar = document.getElementById('uploadProgress');
  const progressPercent = document.getElementById('progressPercent');

  if (!file) return;

  progressContainer.style.display = 'block';

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

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

  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      const percent = Math.round((e.loaded / e.total) * 100);
      progressBar.value = percent;
      progressPercent.textContent = percent + '%';
    }
  };

  xhr.onload = function() {
    if (xhr.status === 200) {
      setTimeout(() => {
        progressContainer.style.display = 'none';
      }, 1000);
    }
  };

  xhr.send(formData);
}