＜input type=“file“/＞修改默认样式无效

小约翰仓鼠

已于 2022-07-22 11:32:20 修改

阅读量320

点赞数

分类专栏： css 文章标签： css

于 2022-07-19 20:47:33 首次发布

本文链接：https://blog.csdn.net/djh052900/article/details/125880508

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

解决思路：<input type="file"/>修改默认样式无效，那就设置div的样式然后让该div触发<input type="file"/>的上传功能

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			#coverDiv {
				width: 100px;
				height: 45px;
                line-height:45px;
				background-color: red;
                font-size:16px;
                text-align:center;
                color:white;
                border-radius:5px;
			}
			#file {
				width: 200px;
				height: 50px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="coverDiv">点击上传</div>
		<input type="file" id="file"/>
		
	</body>
</html>

解决办法如下

效果：设置div的样式然后让该div触发<input type="file"/>的上传功能，返回值为上传文件/图片的名字

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			#coverDiv {
				width: 100px;
				height: 45px;
				line-height: 45px;
				background-color: red;
				font-size: 16px;
				text-align: center;
				color: white;
				border-radius: 5px;
			}
			#file {
				width: 200px;
				height: 50px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="coverDiv">点击上传</div>
		<input type="file" id="file" style="display: none" multiple />
		<ul id="content"></ul>
	</body>
	<script>
		document.getElementById("coverDiv").onclick = function () {
			document.getElementById("file").click();
		};

		document.getElementById("file").onchange = function () {
			let lis = "";
			for (let a = 0; a < this.files.length; a++) {
				lis += `<li>${this.files[a].name}</li>`;
			}
			document.getElementById("content").innerHTML = lis;
		};
	</script>
</html>