如何实现前端文件上传

本文将介绍如何使用前端技术实现文件上传功能，包括文件选择、文件预览、文件上传和进度显示等。

1. 文件选择

首先，我们需要在前端页面中添加文件选择的功能，可以使用input元素的type属性为file的输入框来实现。例如：

<input type="file" id="uploadInput" />

当用户点击该输入框时，系统会打开文件选择对话框，用户可以在对话框中选择要上传的文件。

2. 文件预览

如果希望在文件选择后能够预览所选择的文件，可以使用FileReader对象读取文件内容，并在页面中显示。

const uploadInput = document.getElementById('uploadInput');
const filePreview = document.getElementById('filePreview');

uploadInput.addEventListener('change', function() {
  const file = uploadInput.files[0];
  const reader = new FileReader();

  reader.onload = function(e) {
    // 在页面中显示文件预览
    const img = document.createElement('img');
    img.src = e.target.result;
    filePreview.appendChild(img);
  }

  reader.readAsDataURL(file);
});

在上述示例中，uploadInput代表文件选择输入框，filePreview代表用于显示文件预览的容器元素。当用户选择文件后，FileReader.onload事件将会触发，通过读取FileReader.result属性获取文件内容的DataURL，将其赋值给img元素的src属性，从而显示文件预览。

3. 文件上传

接下来，我们需要将选中的文件上传到服务器。可以通过创建一个FormData对象，将文件添加到该对象中，然后使用XMLHttpRequest对象实现上传操作。

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

uploadInput.addEventListener('change', function() {
  const file = uploadInput.files[0];
  const formData = new FormData();
  formData.append('file', file);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);

  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('文件上传成功');
    } else {
      console.error('文件上传失败');
    }
  }

  xhr.upload.onprogress = function(e) {
    const percent = Math.round((e.loaded / e.total) * 100);
    console.log('上传进度：' + percent + '%');
  }

  xhr.send(formData);
});

在上述示例中，FormData对象用于存储要上传的文件，XMLHttpRequest对象则负责实际的上传操作。注意要将xhr对象的onload事件处理函数设置为在上传完成后执行的处理逻辑，xhr.upload.onprogress事件处理函数则用于显示上传进度。

4. 进度显示

如果希望在页面上动态显示文件上传的进度，可以通过监听XMLHttpRequest.upload.onprogress事件，获取上传进度的信息，并更新页面上的进度条或百分比值。

例如，我们可以创建一个进度条元素来显示上传进度：

<div id="progressBar"></div>

然后在之前的文件上传代码中，将进度信息显示在该元素上：

xhr.upload.onprogress = function(e) {
  const progressBar = document.getElementById('progressBar');
  const percent = Math.round((e.loaded / e.total) * 100);
  progressBar.style.width = percent + '%';
  progressBar.textContent = percent + '%';
}

上述代码将根据上传进度计算百分比，并将其赋值给进度条的宽度和文本内容，从而实现实时进度展示。

总结

通过上述步骤，我们可以实现前端文件上传功能，并且还能预览文件和展示上传进度。希望本文对你理解文件上传有所帮助，以便在实际应用中灵活运用。如果有任何疑问或建议，欢迎留言讨论。

本文来自极简博客，作者：开发者故事集，转载请注明原文链接：如何实现前端文件上传