使用JavaScript函数实现文件上传和下载- 技术经验 -卓越飞翔博客

使用JavaScript函数实现文件上传和下载

随着互联网的发展和普及，文件上传和下载成为了网页应用中常见的功能之一。本文将介绍如何使用JavaScript函数来实现文件上传和下载的功能，并提供具体的代码示例。

文件上传

文件上传指的是将本地的文件通过网页上传到服务器。HTML5中提供了File API用于处理文件的选择和上传。我们可以利用File API中的FileReader对象来读取文件内容，并通过XMLHttpRequest对象将文件发送到服务器。

下面是一个实现文件上传的JavaScript函数代码示例：

function uploadFile() {
  var fileInput = document.getElementById('fileInput');
  var file = fileInput.files[0];
  
  var formData = new FormData();
  formData.append('file', file);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      alert('文件上传成功');
    }
  };
  xhr.send(formData);
}

在上面的代码中，我们首先获取文件选择框的DOM对象，然后取出选中的文件。接下来，创建一个FormData对象，并将选中的文件添加到FormData中。然后，创建一个XMLHttpRequest对象，并使用open()方法指定上传的URL和请求方式。通过onreadystatechange事件监听XMLHttpRequest的状态变化，当状态为4且状态码为200时，表示文件上传成功。最后，调用send()方法将FormData发送到服务器。

文件下载

文件下载指的是从服务器下载文件到本地。JavaScript中可以通过创建一个具有文件下载链接的元素，并模拟点击来实现文件下载。

下面是一个实现文件下载的JavaScript函数代码示例：

function downloadFile() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/download', true);
  xhr.responseType = 'blob';
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var blob = xhr.response;
      var link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = 'file.txt';
      link.click();
    }
  };
  xhr.send();
}

上面的代码中，我们首先创建一个XMLHttpRequest对象，并使用open()方法指定下载的URL和请求方式为GET。设置responseType为'blob'，以便以二进制数据的形式接收文件。通过onreadystatechange事件监听XMLHttpRequest的状态变化，当状态为4且状态码为200时，表示文件下载成功。然后，通过创建一个3499910bf9dac5ae3c52d5ede7383485元素，将响应的blob对象转为URL，并将URL赋值给3499910bf9dac5ae3c52d5ede7383485元素的href属性。将文件名设置为'downloaded.txt'。最后，模拟点击3499910bf9dac5ae3c52d5ede7383485元素来触发文件下载。

综上所述，通过使用JavaScript函数，我们可以方便地实现文件上传和下载的功能。通过File API和XMLHttpRequest对象，我们可以对文件进行读取和发送。通过创建3499910bf9dac5ae3c52d5ede7383485元素并模拟点击，我们可以实现文件的下载。实际应用中，我们可以根据具体的需求对这些功能进行扩展和优化。