tttiger
知识储备
input type="file"的accept属性
accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。
提示：请避免使用该属性。应该在服务器端验证文件上传。
<form>
<input type="file" name="pic" id="image" accept="image/gif, image/jpeg" />
</form>如果不限制图像的格式，可以写为：accept="image/*"。
multiple
multiple 属性规定输入字段可选择多个值。
如果使用该属性，则字段可接受多个值。
默认不使用 若要用直接在input里加上multiple即可
注释：multiple 属性使用欧冠与以下 <input> 类型：email 和 file。
<form >
Select images: <input type="file" name="img" multiple />
<input type="submit" />
</form>实例
后端逻辑
//引入express
const express = require('express');
const fs = require('fs');
const multer = require('multer');
//指定上传存放的位置
const upload = multer({
dest: 'uploads/'
})
// 创建项目实例
const app = express();
// 静态文件托管
app.use('/uploads', express.static(__dirname + '/uploads'))
//原生ajax路由
app.get('/form/ajax', async (req, res) => {
const form = await fs.readFileSync('./ajax_form.html', {
encoding: 'utf8'
});
res.send(form)
})
app.post('/upload/ajax', upload.single('file'), async (req, res) => {
const file = req.file
file.url = "http://localhost:3000/uploads/" + file.filename;
res.send(file);
})
//axios路由
app.get('/form/axios', async (req, res) => {
const form = await fs.readFileSync('./axios_form.html', {
encoding: 'utf8'
});
res.send(form)
})
app.post('/upload/axios', upload.single('image'), async (req, res) => {
//这里的image 是指表单里面 name = image 的那个表单数据
// 这个req.file 是multer添加到请求里面的一个属性 单文件是file 多文件 是files 如果有文本数据是req.body
const file = req.file
file.url = "http://localhost:3000/uploads/" + file.filename;
res.send(file);
})
// 监听端口
app.listen(3000, () => {
console.log('服务器启动成功，主页地址http://localhost:3000')
})前端代码
- ajax原生提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<img id="img1">
</div>
<form id="form">
<input id="btn" type="file" value="上传文件" name="file"> <br>
</form>
<!-- 引入axios库 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const btn = document.getElementById('btn')
btn.onchange = async () => {
const form = document.getElementById('form');
//创建FormData对象
const formData = new FormData(form)
// 创建ajax 对象
const xhr = new XMLHttpRequest();
// 请求方式 请求地址
xhr.open('post','http://localhost:3000/upload/ajax');
xhr.send(formData)
xhr.onload = function() {
// 把返回的字符串转成json对象
const res = JSON.parse(xhr.responseText)
const img = document.getElementById('img1');
// 注意axios才是res.data 具体还是看返回的数据格式
img.src=res.url;
}
}
</script>
<style>
img {
width: 100px;
}
</style>
</body>
</html>- axios提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<img id="img1">
</div>
<form id="form">
<input id="btn" type="file" value="上传文件" name="file"> <br>
</form>
<!-- 引入axios库 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const btn = document.getElementById('btn')
btn.onchange = async () => {
const form = document.getElementById('form');
//创建FormData对象
const formData = new FormData(form)
const res = await axios.post('http://localhost:3000/upload/axios',formData)
if(res) {
// console.log(res.data.url)
const img = document.getElementById('img1');
img.src=res.data.url;
}
}
</script>
<style>
img {
width: 100px;
}
</style>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。