前端技术(19) : 文件上传去掉“未选择任何文件”及样式改进

【代码】前端技术(19) : 文件上传去掉“未选择任何文件”及样式改进。

Lxinccode

715人浏览 · 2024-08-23 10:17:03

Lxinccode · 2024-08-23 10:17:03 发布

参考 : input(type="file")中“未选择任何文件”去除，以及样式整改/全选框（type="checkbox"）样式整改_input file 未选择任何文件-CSDN博客

<!DOCTYPE html>
<html>
	<head>
		<style>
			label {
				position: relative;
			}

			#fileinp {
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0;
			}

			#btn {
				padding: 5px 10px;
				background: #00b0f0;
				color: #FFF;
				border: none;
				border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<label for="fileinp" onchange="selectFile()">
			<input type="button" id="btn" value="选择文件"><span id="text"></span>
			<input type="file" id="fileinp">
		</label>
	</body>
	<script>
		function selectFile() {
			document.getElementById('btn').value = document.getElementById('fileinp').files[0].name;
		}
	</script>
</html>