在万丈高楼平地起之前，不妨审视一下文件上传的功能实现！

2024-02-06 03:50:23

文章

在前端开发中，文件上传是一个非常常见的需求，从简单的图片上传到复杂的视频上传，都有可能涉及到文件上传的实现。

基本的文件上传

最基本的文件上传就是使用HTML的<input type="file">标签，这个标签允许用户选择一个或多个文件上传到服务器。使用这个标签非常简单，只需要在表单中添加一个<input type="file">标签即可，然后使用JavaScript来处理上传的文件。

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="Upload">
</form>

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const file = event.target.querySelector('input[type=file]').files[0];

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

  fetch('/upload', {
    method: 'POST',
    body: formData,
  })
    .then((response) => {
      // Handle the response from the server.
    })
    .catch((error) => {
      // Handle the error.
    });
});

拖拽上传

拖拽上传是一种更方便的文件上传方式，它允许用户直接将文件从电脑上拖放到网页中进行上传。要实现拖拽上传，我们需要使用JavaScript的拖放API。

const dropZone = document.querySelector('.drop-zone');

dropZone.addEventListener('dragover', (event) => {
  event.preventDefault();
  dropZone.classList.add('dragover');
});

dropZone.addEventListener('dragleave', (event) => {
  event.preventDefault();
  dropZone.classList.remove('dragover');
});

dropZone.addEventListener('drop', (event) => {
  event.preventDefault();
  dropZone.classList.remove('dragover');

  const files = event.dataTransfer.files;

  const formData = new FormData();
  for (const file of files) {
    formData.append('file', file);
  }

  fetch('/upload', {
    method: 'POST',
    body: formData,
  })
    .then((response) => {
      // Handle the response from the server.
    })
    .catch((error) => {
      // Handle the error.
    });
});

进度条

当文件上传时，我们可以使用进度条来显示上传的进度。要实现进度条，我们需要使用JavaScript的XMLHttpRequest对象。

const progressBar = document.querySelector('.progress-bar');

const xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', (event) => {
  const progress = (event.loaded / event.total) * 100;
  progressBar.style.width = `${progress}%`;
});

xhr.addEventListener('load', (event) => {
  // Handle the response from the server.
});

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