当我们需要在前端实现文件上传的功能时，可以使用原生的JavaScript代码来实现。下面是一个完整的攻略，包含了前端上传文件需要用到的一些知识点。
1. 获取文件上传的节点
要上传文件，需要在页面上放置一个文件上传的节点，通常使用HTML中的<input type="file" />元素。获取节点的方式可以使用原生JavaScript中的 getElementById()方法或querySelector()方法。
<input type="file" id="uploadFile" accept=".txt" />
//使用getElementById()方法获取上传文件节点
const inputNode = document.getElementById('uploadFile');
//使用querySelector()方法获取上传文件节点
const inputNode = document.querySelector('#uploadFile');
accept属性是用来限制上传文件的类型。
2. 监听文件上传事件
要实现上传操作我们需要监听文件的上传事件，然后在事件触发时执行上传操作。
const inputNode = document.querySelector('#uploadFile');
inputNode.addEventListener('change', handleUpload);
function handleUpload (event) {
//上传操作
}
3. 上传操作
获取选定的文件对象后，通过AJAX将文件上传到服务器。这里我们使用 XMLHttpRequest 对象来发送HTTP请求。
function handleUpload (event) {
const file = event.target.files[0];
const formData = new FormData();
formData.append('file', file, file.name);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.onload = function () {
console.log('上传成功!');
};
xhr.send(formData);
}
示例1
下面是一个使用原生JS实现以POST形式上传JSON文件的示例：
<!DOCTYPE html>
<html>
<head>
<title>前端上传文件</title>
</head>
<body>
<input type="file" id="uploadFile" accept=".json" />
<button id="submit">提交</button>
<script>
const inputNode = document.querySelector('#uploadFile');
const submitBtn = document.querySelector('#submit');
inputNode.addEventListener('change', handleUpload);
function handleUpload (event) {
const file = event.target.files[0];
const formData = new FormData();
formData.append('file', file, file.name);
submitBtn.addEventListener('click',function () {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/uploadData');
xhr.onload = function () {
console.log('上传成功!');
};
xhr.send(formData);
});
}
</script>
</body>
</html>
服务端代码示例（使用Node.js）：
const express = require('express');
const app = express();
const port = 3000;
const bodyParser = require('body-parser');
app.use(bodyParser.json());
const fs = require('fs');
app.post('/uploadData', (req, res) => {
const file = req.files.file;
const savePath = './' + file.name;
const data = JSON.parse(fs.readFileSync(file.path));
fs.writeFileSync(savePath, JSON.stringify(data));
res.send('文件上传成功!');
});
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});
示例2
下面是一个使用原生JS实现以POST形式上传图片文件的示例：
<!DOCTYPE html>
<html>
<head>
<title>前端上传文件</title>
</head>
<body>
<input type="file" id="uploadImage" accept="image/*"/>
<button id="submit">提交</button>
<script>
const inputNode = document.querySelector('#uploadImage');
const submitBtn = document.querySelector('#submit');
inputNode.addEventListener('change', handleUpload);
function handleUpload (event) {
const file = event.target.files[0];
const formData = new FormData();
formData.append('file', file, file.name);
submitBtn.addEventListener('click',function () {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/uploadImage');
xhr.onload = function () {
console.log('上传成功!');
};
xhr.send(formData);
});
}
</script>
</body>
</html>
注意：由于浏览器的安全性限制，不能直接使用XMLHttpRequest来上传文件。可以使用第三方库（如jQuery，axios等）或者formData的API来实现。
服务端代码示例（使用Node.js）：
const express = require('express');
const app = express();
const port = 3000;
const bodyParser = require('body-parser');
app.use(bodyParser.json());
const fs = require('fs');
app.post('/uploadImage', (req, res) => {
const file = req.files.file;
const savePath = './' + file.name;
fs.copyFileSync(file.path, savePath);
res.send('文件上传成功!');
});
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});
以上是两个使用原生JS实现前端本地文件上传的示例，如有疑问可以参考更多相关的文档或资料。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生JS实现前端本地文件上传 - Python技术站
微信扫一扫 
支付宝扫一扫 