实现代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>file</title>
<style type="text/css">
.main {
width: 70px;
height: 30px;
border: 1px solid lightblue;
margin-right: 10px;
}
.aleft {
display: block;
text-decoration: none;
}
.hide {
position: absolute;
width: 70px;
opacity: 0;
}
</style>
</head>
<body>
<h1>图片上传测试</h1>
<!-- 创建一个按钮区域 -->
<div class="main">
<!-- 使用a标签嵌套一个input标签
input标签只接受jpg格式，并且使用事件来获取图片的信息 -->
<a href="javascript:viod(0)" class="aleft">
<input type="file" accept=".jpg" name="img" class="hide" onchange="getfile(this.files)">
上传图片
</a>
</div>
<script type="text/javascript">
function getfile(e) {
console.log(e[0])
}
</script>
</body>
</html>
