纯JavaScript实现Ajax异步文件上传及NodeJS服务端处理

本文主要探讨了如何在不依赖第三方库的情况下，使用Ajax异步上传文件以及在NodeJS express服务端处理文件上传的实现方法。同时，文中还提及了如何实现文件上传进度条的功能。 文件上传是Web应用中常见的功能，传统的文件上传方式通常伴随着页面刷新，用户体验不佳。Ajax异步上传则解决了这一问题，使得用户在上传文件时无需等待页面刷新，提高了交互性。在HTML中，我们只需要一个`<input type="file">`用于选择文件，以及一个`<button>`触发上传操作。 在JavaScript中，我们可以监听`<button>`的点击事件，创建一个`XMLHttpRequest`对象来发送异步请求。关键在于使用`FormData`对象，它允许我们将文件添加到表单数据中。以下是一个简单的示例： ```javascript var file = document.querySelector('#file'); var upload = document.querySelector('#upload'); var xhr = new XMLHttpRequest(); // 点击上传 function uploadFile(event) { var formData = new FormData(); formData.append('test-upload', file.files[0]); xhr.upload.addEventListener('progress', uploadProgress); xhr.onload = uploadSuccess; xhr.open('POST', '/upload', true); xhr.send(formData); } // 上传成功 function uploadSuccess(event) { if (xhr.readyState === 4) { console.log(xhr.responseText); } } // 上传进度 function uploadProgress(event) { if (event.lengthComputable) { var percentComplete = event.loaded / event.total; console.log(percentComplete * 100 + '%'); // 更新进度条或其他进度提示 } } ``` 在服务端，我们通常使用NodeJS的Express框架来处理文件上传。首先，需要安装`multer`中间件，它专门用于处理`multipart/form-data`类型的表单数据，这是文件上传时常用的编码类型。以下是使用Express和Multer处理文件上传的简要代码： ```javascript const express = require('express'); const multer = require('multer'); const app = express(); const upload = multer({ dest: 'uploads/' }); app.post('/upload', upload.single('test-upload'), (req, res) => { const file = req.file; if (file) { // 文件已成功上传到指定目录，可以进行后续处理 res.status(200).send('文件上传成功'); } else { res.status(400).send('文件上传失败'); } }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 这里的`upload.single('test-upload')`表示只接收一个名为'test-upload'的文件字段。文件会被保存在`uploads/`目录下，服务端可以对文件进行进一步的处理，如存储、验证或转换等。 通过上述方式，我们可以实现一个基本的异步文件上传系统，同时利用xhr对象的`upload`属性和`progress`事件，可以实时反馈上传进度，增强用户体验。这种方法避免了引入大型库，降低了应用程序的加载时间，提高了性能。