什么是JS上传文件到服务器？
JavaScript(简称JS)是一种轻量级的编程语言，主要用于网页开发，在前端开发中，我们经常需要实现文件上传功能，以便用户可以将本地的文件上传到服务器，而使用JavaScript可以方便地实现这一功能，因为它可以直接与HTML中的表单元素进行交互，从而获取用户的选择并将文件发送到服务器。
如何使用JS实现文件上传功能？
1、创建一个HTML表单
我们需要在HTML中创建一个表单，用于让用户选择要上传的文件，表单的enctype属性设置为multipart/form-data,表示我们将要上传的是二进制文件，还需要添加一个input元素，其type属性设置为file,用于触发文件选择对话框。
<form id="uploadForm"> <input type="file" name="file" /> <button type="submit">上传</button> </form>
2、编写JS代码
接下来，我们需要编写JavaScript代码，用于处理表单提交事件，当用户点击上传按钮时，我们的代码将阻止表单的默认提交行为(即页面刷新),然后通过Ajax技术将文件发送到服务器。
document.getElementById('uploadForm').addEventListener('submit', function (event) {
// 阻止表单默认提交行为
event.preventDefault();
// 获取用户选择的文件
var file = document.querySelector('input[type=file]').files[0];
// 创建一个FormData对象，用于存储要发送的数据
var formData = new FormData();
formData.append('file', file);
// 使用Ajax技术将文件发送到服务器
var xhr = new XMLHttpRequest();
xhr.open('POST', 'your-server-url', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('文件上传成功');
} else if (xhr.readyState === 4) {
console.log('文件上传失败');
}
};
xhr.send(formData);
});
3、在服务器端接收文件
我们需要在服务器端编写代码，用于接收并处理客户端发送的文件，这里以Node.js为例，使用multer库来处理文件上传，首先安装multer:
npm install multer --save
然后在服务器端编写代码：
const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' }); // 将上传的文件保存到'uploads/'目录下
app.post('/your-server-url', upload.single('file'), function (req, res) {
console.log('文件接收成功');
res.send('文件接收成功');
});
如何限制可上传的文件类型？
在实际应用中，我们可能需要限制用户只能上传特定类型的文件，例如图片或文档，这可以通过修改multer的配置来实现，如果我们只允许用户上传JPEG和PNG格式的图片，可以这样配置：
const upload = multer({ dest: 'uploads/', limits: { filesSize: 1000000, files: 1 }, fileFilter: (req, file, callback) => { // 只允许上传JPEG和PNG格式的图片 const allowedExtensions = ['jpg', 'jpeg', 'png']; const mimeTypes = ['image/jpeg', 'image/png']; if (allowedExtensions.includes(path.extname(file.originalname))) { callback(null, true); } else { callback(new Error('只允许上传JPEG和PNG格式的图片')); } } }); // 其他配置保持不变 ... app.post('/your-server-url', upload.single('file'), function (req, res) { ... }); ```
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/271759.html
微信扫一扫 