formData
XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.
formData使用
let formData = new FormData()
formData主要有两个方法set，append
formData.set('a', 5) // 把a的键值设置为5
formData.append('b', 5) // 把b的兼职设置为5
那set和append区别？？
formData.set('a', 5)
formData.set('a', 6) // 把a的键值设置为6 {a: 6}
formData.append('b', 5)
formData.append('b', 6) // 把b的键值[5, 6] {b: [5, 6]}
利用formData实现图片上传
客户端
<body>
<input type="file" id="file" style="display: none;">
<button id="btn">upload</button>
</body>
<script> let btn = document.querySelector('#btn') let file = document.querySelector('#file') btn.onclick = function() { file.click() // 调取系统选择图片的弹框 } // 监听input的file变化值 file.onchange = function (event) { let file = event.target.files[0] upload(file) } function upload(file) { let xhr = new XMLHttpRequest() xhr.open('post', '/upload', true) let formData = new FormData() formData.set('filename', file) xhr.send(formData) xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { alert('success') } } } </script>
服务器
const express = require('express')
const app = express()
const path = require('path')
const multer = require('multer')
const multerObj = multer({ dest: 'uploads/'}) //上传中间件
app.use(multerObj.any())
app.get('/', (req, res, next) => {
res.setHeader('Content-Type', 'text/html')
res.sendFile(path.join(__dirname, 'index.html'))
})
app.post('/upload', (req, res, next) => {
console.log(req.files)
res.send({
'states':'success'
})
})
app.listen(9090, () => {
console.log('server listen 9090')
})
今天的文章formData原生实现图片上传分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/22599.html
