There can be no Triumph without Loss,No Victory without Suffering,No Freedom without Sacrifice.
All you have to decide is what to do with the time that is given to you.
Get busy Living, or Get busy Dying?
  首页 | 留言给我 | 订阅 Rss | CLI | 黄白之恋 Posts:158   Hits: 2354993    Comments: 170    
 日历归档
<<  <  2020 - 10  >  >>
SuMoTuWeThFrSa
    123
45678910
11121314151617
18192021222324
25262728293031
 About Me
 Name: ZhangSichu
 Sex: Male
 Age: 32
 Email: ZhangSichu@gmail.com
 MSN: ZhangSichu@hotmail.com
 Home: ZhangSichu.com
 WeiBo: weibo.com/zhangsichu
 个人推荐
 分类归档
  ·C++/C(5)  RSS
  ·软件工程(1)  RSS
  ·杂事/随感(26)  RSS
  ·.Net/Java(30)  RSS
  ·面向对象程序设计(5)  RSS
  ·汇编/破解(0)  RSS
  ·平面设计(3)  RSS
  ·SQL(5)  RSS
  ·COM/COM+(2)  RSS
  ·Web开发(81)  RSS
 My Friends
Back Forward Refresh Home 2020年10月22日 星期四 RSS CLI Mine Sweeper. In Javascript.

  使用透明叠加法美化文件上传界面
字体大小 [ ]

使用透明叠加法的方法实现没有使用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>
  Posted @ 2/3/2007 1:05:36 PM | Hits (52292) | Comment (0

  Post Comment
标题 *
作者 *
密码 记住我
评论 *
    


Stable in Firefox 1.5 2.0Stable in IE6 IE7Stable in MozillaStable in Netscape
ZhangSichu.com V0.1.7507
Powered By ZhangSichu
Copyright © ZhangSichu
Download ZhangSichu.com source code. Download source code