日历归档 |
|
<< < 2024 - 12 > >> | Su | Mo | Tu | We | Th | Fr | Sa | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
|
|
|
About Me |
|
|
ZhangSichu |
|
Male |
|
32 |
|
ZhangSichu@gmail.com |
|
ZhangSichu@hotmail.com |
|
ZhangSichu.com |
|
weibo.com/zhangsichu |
|
|
|
个人推荐 |
|
|
|
|
分类归档 |
|
|
|
|
My Friends |
|
|
|
|
使用透明叠加法美化文件上传界面
|
使用透明叠加法的方法实现没有使用Iframe的操作。 把文件域放在点击的span上,并让它透明。 这样用户看到的是自定义span点击区域,看不到文件浏览的区域。 点击的依然是浏览按钮,没有违反任何安全机制。 原方法借鉴位置。 http://www.script8.com/bbs/thread.asp?tid=6
<html> <head> <title>Test HTML</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> body { font-size:12px; cursor:default; } .hand { cursor:pointer; cursor:hand; } .btnFade { position:absolute; padding-top:3px; font-family:宋体; } .btnReal { position:absolute; width:60px; overflow:hidden; filter:alpha(opacity=0); -moz-opacity:0; } .fileElement { float:left; margin-right:6; padding-top:3; color:darkgreen; } </style> </head> <body onload="setup();"> <script language="javascript" type="text/javascript"> //Use the reload tech could hide some control ui. function setup(){ $("btnReal").innerHTML = "<input onchange=\"addFile(this);\" type=\"file\" size=\"1\" class=\"hand\" hidefocus=\"true\" />"; }
function addFile(file){ //Create object append filename. var fileName,fileElement; fileName=file.value.replace(/\\/g,"/").replace(/(.*\/)(.*)/,"$2"); file.style.display = "none"; fileElement=document.createElement("nobr"); // just want to display the file. fileElement.className="fileElement"; fileElement.innerHTML = "□"+fileName; //Add the fileName. fileElement.innerHTML += "<font style=color:red;font-weight:bold; onclick=\"$(fileList).removeChild(this.parentNode);\" class=hand>"+ unescape("×")+"</font>"; //Add the delete button. $("fileList").insertBefore(fileElement,$("btnFile")); setup(); }
function $(element){ return typeof(element)== "object" ? element : document.getElementById(element); } </script>
<div id="fileList"> <div id="btnFile" onmouseover="$(btnFade).style.textDecoration=underline;" onmouseout="$(btnFade).style.textDecoration=none;" style="color:Navy"> <!--this div just want to display a hand.--> <span id="btnFade" class="btnFade" style="cursor:pointer">#@#添加附件</span> <span id="btnReal" class="btnReal" onmouseover="this.scrollLeft=100px"></span> </div> </div> </body> </html>
|
|
|
|
|
|
|