您的位置：首页 > 其它

点击图片就可以完成上传功能

2016-04-20 16:30 543 查看
<!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>

代码可直接复制亲测！

实现原理是：用图片盖住input上传文件类型控件！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航