JS异步文件上传（兼容IE8+）

2023年5月27日上午10:18 • JavaScript

首先，让我们来了解一下什么是异步文件上传。

异步文件上传是指在上传过程中，不会阻塞页面的其他操作，而是在后台进行上传操作。这种方式提高了用户体验，同时也提升了网站性能。

现在，我们来了解一下如何使用 JavaScript 实现异步文件上传。

实现步骤

为 input 元素绑定 change 事件，获取用户选择的文件。
使用 FormData 对象封装文件数据，然后通过 Ajax 发送数据到后端。
在后端服务器中，解析 FormData 数据，将文件保存到磁盘上。
返回上传结果给前端页面。

接下来，我们会一步步地介绍如何实现这些步骤。

1. 绑定 change 事件

我们可以使用以下方式为 input 元素绑定 change 事件。需要注意的是，我们在事件处理函数中，调用了 sendFile 函数，这个函数后面会介绍到。

const inputFile = document.getElementById('input-file');
inputFile.addEventListener('change', () => {
  const file = inputFile.files[0];
  sendFile(file);
});

2. 发送文件数据

在 sendFile 函数中，我们使用了 FormData 对象封装了文件数据，然后通过 Ajax 将数据发送到后端服务器。

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

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

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
}

3. 后端服务器解析文件数据

在服务器端，我们使用 Node.js 平台的 express 框架处理请求，并使用 multer 中间件处理文件上传。

const express = require('express');
const multer = require('multer');
const app = express();

// Multer 中间件，用于处理文件上传
const upload = multer({ dest: 'uploads/' });

// 处理文件上传的路由
app.post('/upload', upload.single('file'), (req, res) => {
  console.log(req.file);
  res.send('File uploaded successfully!');
});

app.listen(3000, () => console.log('Server listening on port 3000!'));

4. 返回上传结果

后端服务器将上传结果返回给前端页面。

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

这就是 JavaScript 实现异步文件上传的过程，通过以上几个步骤，我们就可以成功实现异步文件上传。

这里还演示了一个兼容 IE8+ 的异步上传示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JS异步文件上传（兼容IE8+）</title>
</head>
<body>
  <form>
    <input type="file" id="input-file">
    <button type="button" id="upload-button">上传</button>
  </form>
  <script>
    function sendFile(file) {
      var xhr = new XMLHttpRequest();
      var formData = new FormData();
      formData.append('file', file);

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

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.responseText);
        }
      };
    }

    document.getElementById('upload-button').onclick = function () {
      var inputFile = document.getElementById('input-file');
      var file = inputFile.files[0];
      sendFile(file);
    };
  </script>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS异步文件上传（兼容IE8+） - Python技术站