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

上传文件

原生上传文件可以通过input标签中的type="file"实现，多文件上传则需要加上multiple属性。

<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 file of files) {
	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>