<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>点击图片上传功能测试</title>
<style type="text/css">
.maleIdOfImageBackView{
height:256px;
width: 256px;
background:url('images/01.jpg');/*图片路径根据具体情况可更改*/
position:relative;
}
.maleFileInputBackView{
height:256px;
font-size: 300px;
position:absolute;
right:0;
top:0;
opacity: 0;
filter:alpha(opacity=0);
cursor:pointer;
}
</style>
</head>
<body>
<div class="maleIdOfImageBackView">
<input class="maleFileInputBackView" type="file" name="" id="" />
</div>
</body>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>点击图片上传功能测试</title>
<style type="text/css">
.maleIdOfImageBackView{
height:256px;
width: 256px;
background:url('images/01.jpg');/*图片路径根据具体情况可更改*/
position:relative;
}
.maleFileInputBackView{
height:256px;
font-size: 300px;
position:absolute;
right:0;
top:0;
opacity: 0;
filter:alpha(opacity=0);
cursor:pointer;
}
</style>
</head>
<body>
<div class="maleIdOfImageBackView">
<input class="maleFileInputBackView" type="file" name="" id="" />
</div>
</body>
</html>
代码可直接复制亲测!
实现原理是:用图片盖住input上传文件类型控件!