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

<!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

原文地址:https://www.cnblogs.com/axu92312/p/5511998.html