<!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>
<input type="file" class="upload">
<img src="" alt="" class="my-img">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
//文件选择元素->chang改变事件
document.querySelector('.upload').addEventListener('change',e=>{
//1.获取图片文件
console.log(e.target.files[0])
//2.使用FormData携带图片文件
const fd=new FormData()
fd.append('img',e.target.files[0])
//3.提交到服务器
axios({
url:'http://hmajax.itheima.net/api/uploadimg',
method:'POST',
data:fd
}).then(result=>{
console.log(result)
const imgUrl=result.data.data.url
document.querySelector('.my-img').src=imgUrl
})
})
</script>
</body>
</html>
Ajax-图片上传
最新推荐文章于 2024-09-21 11:29:05 发布
该篇文章展示了如何在HTML页面中使用axios库处理文件上传,包括选择文件、创建FormData对象并将其与图片数据一起发送到`http://hmajax.itheima.net/api/uploadimg`API进行上传,最后将返回的图片URL设置到页面上。
摘要由CSDN通过智能技术生成