JavaScript进阶之前端文件上传和下载示例详解

本文将详细讲解前端文件上传和下载的过程和实现方法，包括如何使用HTML5 FormData API、AJAX和原生JavaScript来完成文件上传和下载功能的开发。

文件上传

文件上传是我们日常开发中常用的功能之一。下面我们通过两个示例来讲解文件上传的实现。

示例1：上传图片并预览

1. HTML部分

<input type="file" id="uploadInput" accept="image/*">
<img id="previewImg" src="" width="200" height="200">

其中，input标签的type属性为file，表示这是一个文件上传的输入框。accept属性的值为image/*，表示只能上传图像类型的文件。

1. JavaScript部分

let uploadInput = document.getElementById('uploadInput');
let previewImg = document.getElementById('previewImg');

uploadInput.addEventListener('change', function() {
  let file = uploadInput.files[0];
  if (file) {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function() {
      previewImg.src = reader.result;
    };
  }
});

上述代码首先获取了input标签和img标签，然后添加了change事件监听。在事件处理函数中，通过files属性获取了文件对象，使用FileReader对象读取文件内容，最后通过img标签将预览图像展示出来。

示例2：上传表单数据和文件

1. HTML部分

<form id="uploadForm">
  <input type="text" name="title">
  <input type="file" name="file">
  <button type="submit">提交</button>
</form>

这是一个普通的表单，其中包含了一个文本输入框和一个文件上传输入框。

1. JavaScript部分

let uploadForm = document.getElementById('uploadForm');

uploadForm.addEventListener('submit', function(event) {
  event.preventDefault();
  let formData = new FormData(uploadForm);
  let xhr = new XMLHttpRequest();
  xhr.open('POST', 'upload.php');
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send(formData);
});

上述代码中，首先通过FormData对象获取表单数据和文件数据，然后通过XMLHttpRequest对象发送POST请求，最后在请求响应成功后打印出响应文本。

文件下载

文件下载是另一个常见的前端功能。下面给出一个示例来讲解文件下载的实现。

示例3：下载Excel文件

function downloadExcel(filename) {
  let xhr = new XMLHttpRequest();
  xhr.open('GET', 'download.php?filename=' + filename);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    if (xhr.status === 200) {
      let blob = xhr.response;
      let link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = filename;
      link.click();
    }
  };
  xhr.send();
}

上述代码中，通过XMLHttpRequest对象发送一个GET请求，请求的URL包含待下载的文件名。指定响应的responseType属性为blob，表示响应是一个二进制数据。在响应成功后，利用window.URL.createObjectURL方法获取下载链接，创建一个a标签，设置其href和download属性，最后利用click方法模拟用户单击下载链接，完成文件下载功能。