文件上传带参数，以及header

最新推荐文章于 2024-09-30 14:35:08 发布

qq_40633789

最新推荐文章于 2024-09-30 14:35:08 发布

阅读量2k

点赞数 1

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/qq_40633789/article/details/104802328

版权

前段时间因为公司的业务需求，需要实现图片，与参数一起上传到服务端。后面通过查资料，再结合自己已知的知识点解决了问题；

原本项目使用的axios请求后端，后面查询axios的资料与api也没能解决问题，后来想起了原生的上传文件的方式。

以下是实现的部分代码

<body>
	<input type='file' id='file'>
</body>

<script>
	var file=document.querySelector('#file');
	file.addEventListener('change',function(event){
		const from=new FormData();
		//添加字段与图片or文件
		//from.append('字段名',内容);
		from.append('img',event.target.files[0]);
		from.append('name','123');
		//编辑好参数与文件后在利用ajax进行网络请求
		const xhr=new XMLHttprequest();
		xhr.open('get','链接');
		//xhr.setRequestHeader('header','value') 可以利用此方法进行header的修改与添加，必须在open之后再使用
		xhr.send(from);
		xhr.onreadystatechange=function(){
			if(this.readyState===4&&this.status===200){
				console.log(this.respone)//相应的数据
			}
		}
	})
</script>