造假触发点击上传文件效果 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function $(id){
    return document.getElementById(id);
}

</script>
<style>
#file_id{ position:absolute; z-index:12; filter:alpha(opacity:0); opacity:0;}
</style>
</head>

<body>
<input type="file" id="file_id" onchange="$('txt_id').value=this.value" />
<input type="text" id="txt_id" value="这是假的！" />
<input type="button" id="btn_id"  value="假浏览" />
</body>
</html>

 

 

造假。
将file元素通过position:absolute; z-index提高，弄到假象上面。
可以随意对假象设置样式。
然后将file的透明度改成0，因为层级高，点击假象的时候其实点击的是file的浏览按钮（透明了也能点到）
然后在file的值改变的时候把内容赋给假象。
测试浏览器：ie7

 转自：http://bbs.blueidea.com/forum.php?mod=viewthread&tid=2994780&page=1

posted @ 2016-05-20 14:29  阿旭92312  阅读(227)  评论(0)  编辑  收藏  举报