"Node.js利用Ajax实现网页无刷新上传图片示例代码"

本篇文章介绍了如何利用Node.js和Ajax技术实现网页无刷新上传图片的实例代码。在通常情况下，上传图片需要通过提交form表单来实现，但会导致网页刷新。通过使用Ajax技术和FormData()对象，可以有效地解决这个问题。具体代码如下： HTML部分： ```html <div class="form-group"> <label for="file">File</label> <input type="file" name="file" id="file"> <p id="result"></p> <img id="img" src="" /> </div> <button id="upload" class="btn btn-default">提交</button> ``` 接下来是Node.js代码的具体实现，以下是一个简单的例子： ```javascript const express = require('express'); const app = express(); const multer = require('multer'); // 使用multer中间件处理文件上传 const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, 'uploads') // 存储文件的目录 }, filename: function (req, file, cb) { cb(null, file.fieldname + '-' + Date.now()) // 保存的文件名 } }) const upload = multer({ storage: storage }); // 在express中使用multer中间件处理文件上传 app.post('/upload', upload.single('file'), (req, res) => { // 上传成功后返回json数据 res.json({ message: '文件上传成功' }); }) app.listen(3000, () => console.log('服务器已启动...')); ``` 在客户端，使用Ajax来发送文件并实现无刷新上传。下面是一个简单的例子： ```javascript document.getElementById('upload').addEventListener('click', function() { const fileInput = document.getElementById('file').files[0]; const formData = new FormData(); formData.append('file', fileInput); fetch('/upload', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('文件上传失败', error)); }); ``` 这就是利用Node.js和Ajax实现网页无刷新上传图片的例子。希望对您有所帮助！