input标签实现一次上传多个文件并对数据储存以及传输

原创已于 2023-04-10 11:25:40 修改

· 7.3w 阅读

32 ·

版权

文章标签：

#javascript #前端 #html

于 2023-03-07 10:27:57 首次发布

文章介绍了如何使用HTML的input标签type=file以及multiple属性实现多文件上传功能，通过JavaScript的onchange事件获取文件信息，并将文件信息存储在FormData对象中，为数据传输做准备。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

上传文件

原生上传文件可以通过input标签中的type="file"实现，多文件上传则需要加上multiple属性。
在这里插入图片描述

//html
    <span>文件名：</span>
	<input type="text" id="doc">
	<button>选择文件</button>
	<input type="file" id="upload" multiple onchange="getFile(value)" style="opacity: 0.5; margin-left: -74px; width: 74px;">

获取上传文件信息

通过onchange方法触发文件上传。怎么才能拿到上传的文件信息呢？
通过获取id为upload的dom，即document.getElementById('upload')，通过document.getElementById(‘upload’).files获取文件的具体信息，该数据为伪数组。
在这里插入图片描述

	<script>
		function getFile(value) {
			// 获取文本框dom
			var doc = document.getElementById('doc');
			// 获取上传控件dom
			var upload = document.getElementById('upload');
			let files = upload.files;
			// 获取文件名
			var fileName = upload.files[0].name;
			// 获取文件路径
			var filePath = upload.value;
			doc.value = fileName;
		}
	</script>

数据传输

将文件信息放到formData中，然后进行传输。

let formData = new FormData();
for (let i = 0; i < files.length; i++) {
	let file = files[i]
	formData.append('files', file)
}

注意直接console.log(formData)是空值，可以使用formData.getAll("")或者formData.get("")查看存储的文件信息，getAll查看全部信息，get默认查看第一个。

console.log(formData.getAll('files'))

在这里插入图片描述

源码

<body>
	<span>文件名：</span>
	<input type="text" id="doc">
	<button>选择文件</button>
	<input type="file" id="upload" multiple onchange="getFile(value)"
		style="opacity: 0.5; margin-left: -74px; width: 74px;">
	<script>
		function getFile(value) {
			let formData = new FormData();
			// 获取文本框dom
			var doc = document.getElementById('doc');
			// 获取上传控件dom
			var upload = document.getElementById('upload');
			let files = upload.files;
			//遍历文件信息append到formData存储
			for (let i = 0; i < files.length; i++) {
				let file = files[i]
				formData.append('files', file)
			}
			// 获取文件名
			var fileName = upload.files[0].name;
			// 获取文件路径
			var filePath = upload.value;
			doc.value = fileName;
		}
	</script>
</body>