master

分支 (2)

管理

管理

master

dev_test

web-test
/
HTML+js+css实现点击图片弹出上传文件窗口的两种思路.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.fileInputContainer{
		        height:256px;
		        background:url(upfile.png);
		        position:relative;
		        width: 256px;
		    }
		    .fileInput{
		        height:256px;
		        overflow: hidden;
		        font-size: 300px;
		        position:absolute;
		        right:0;
		        top:0;
		        opacity: 0;
		        filter:alpha(opacity=0);
		        cursor:pointer;
		    }
		</style>
	</head>
	<body>
		<div class="fileInputContainer">
			<input class="fileInput" id="" type="file" name="" />
		</div>
		<div class="face">
			<p><img class="normalFace" src="/img/add.svg" onclick="fileSelect();"></p>
			<form id="form_face" enctype="multipart/form-data" style="width:auto;">
				<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" style="display:none;">
			</form>
		</div>
		<script type="text/javascript">
			function fileSelect() {
				document.getElementById("fileToUpload").click();
			}

			function fileSelected() {
				// 文件选择后触发次函数
			}
		</script>
	</body>
</html>