HTML+js+css实现点击图片弹出上传文件窗口的两种思路
2016-01-22 13:48
1166 查看
转载自:http://my.oschina.net/u/1035715/blog/311357
第一种:CSS实现
<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>
<div class="fileInputContainer"><input class="fileInput" id="" type="file" name=""></div>
第二种:javascript实现
<div class="face">
<p><img class="normalFace" src="./images/upload.jpg" 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>
第一种:CSS实现
<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>
<div class="fileInputContainer"><input class="fileInput" id="" type="file" name=""></div>
第二种:javascript实现
<div class="face">
<p><img class="normalFace" src="./images/upload.jpg" 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>
相关文章推荐
- js之执行环境(作用域)与作用域链深入剖析3
- js之执行环境(作用域)与作用域链深入剖析2
- js之执行环境(作用域)与作用域链深入剖析
- JavaScript正则表达式
- 公历和农历转换的JS代码
- JS2
- js1
- 8款JS框架比较
- JS框架整理
- JS 刷新页面
- javascript的String对象截取字符串的方法
- fastjson 处理null值,对象为null时返回{},数字为null返回[]
- 使用Freemarker 实现JSP页面的静态化
- 20款最优秀的JavaScript编辑器
- js简单设置与使用cookie的方法
- 【javascript】--判断分销商名称是否重复,并更换相应图片 -- drp170
- 详解javascript传统方法实现异步校验
- button跟submit的区别及使用js实现页面跳转的方式
- flash上传组件swfupload的坑点及解决方法
- JavaScript回调方法中使用外部变量出现的问题