2011
Jan
12
因为浏览器安全性的因素，使得网页无法直接用 Javascript 呼叫 "档案上传 input"，执行浏览档案的动作，所以必须做假的按钮来营造浏览的假象，实际上，使用者还是点到正常的档案上传 input，下例开始介绍「假按钮」 !!。
※测试过可以执行的浏览器有：IE 6, IE 7, IE 8 Firefox 3 ,Chrome ,Opera
先看看范例把，网页档案上传按钮范例如下：
按钮制作说明：
- 在底图放上事先做好的按钮图片与假的input。
- 放真的在底图上面，并设定为完全透明。
语法为： IE:filter:alpha(opacity=0); , 其它:opacity:0; - 定位方式：可以使用absolute,relative,margin..等，本范例采用margin来将真的input定位至假的input上方。
- 若设定为半透明，就可以明显的看出制作方式如下。
- 最后加上script语法，将选取到的档案名称，回传给假的input。
网页原始码 CSS：
Example
- <style>
- .cover_div{
- float:left;
- width:270px;
- }
- .fake_input{
- float:left;
- width:135px;
- margin:0 5px 0 0;
- }
- .fake_image{
- background:url(add_date.jpg);
- width:74px;
- height:21px;
- display:block;
- float:left;
- text-align:center;
- color:white;
- text-decoration:none;
- font-size:12px;
- padding:3px 0 0 0;
- color:white !important;
- }
- .hide_input{
- border:1px solid red;
- margin:0px 0 0 -267px;
- margin:0px 0 0 -267px9;
- float:left;
- height:30px;
- opacity:0;
- filter:alpha(opacity=0);
- width:220px9;
- }
- .clear{
- clear:both;
- }
- </style>
网页原始码 Javascript：
Example
- function setText(ob,name){
- document.getElementById(name).value=ob.value;;
- }
网页原始码 html：
Example
- <div class="cover_div">
- <input id="fileName" class="fake_input" type="text"><a href="" class="fake_image">点我</a>
- <div class="clear"></div>
- </div>
回應 (Leave a comment)