[初级教程]更改文件上传框的样式

我佛山人 楼主

先测试一下下面的代码看看：

<input type="file" style="border:1px solid blue;color:red;background:green;font:bold 12px '隶书';height:18px;width:160px">

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

可以看到，上传框带有两个控件：一个文本框和一个按钮。定义的样式对文本框全部生效，对于按钮，只有边框样式、字体大小和外观尺寸生效。看来直接用CSS定义它的外观是行不通的。

我们知道，大部分控件都有一个单击(click)事件句柄，上传框在单击"浏览..."按钮时会弹出"选择文件"对话框，如果我们自己模拟一个上传框：一个文本框(<input type="text">)和一个按钮(<input type="button">或<button>Text</button>)，在单击自定义按钮时同时触发上传框的click事件让它弹出"选择文件"对话框... ...于是有：

<style> .file{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px} </style> <input type="text" class="file" id="f_file"><input type="button" value="上传文件" class="file" onClick="t_file.click()"> <input name="upload" type="file" id="t_file" onchange="f_file.value=this.value" style="display:none">

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

在点击"上传文件"按钮时执行t_file.click()，当上传框的值有所改变时通过onchange事件句柄执行f_file.value=this.value，即保持真正的上传框与模拟的上传框的值同步更新，style="display:none"让真正的上传框隐藏，使模拟的文件上传框能以假乱真------问题似乎解决了，不过，把代码放到表单中测试一下看看：

<style> .file{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px} </style> <form method="post" action="" enctype="multipart/form-data"><input type="text" class="file" id="f_file"><input type="button" value="上传文件" class="file" onClick="t_file.click()"> <input name="upload" type="file" id="t_file" onchange="f_file.value=this.value"> <input type="submit"> </form>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

点击"上传文件"按钮后再提交表单，可以看到，真正的上传框的内容被清空了，意思就是说，这样模拟出来的上传框没有任何意义，因为没办法上传文件(记得上期《电脑》报上有关于这个的文章，我想作者肯定没放到表单中测试过)。
之所以是这个结果，估计是因为微软出于安全方面的考虑，只有当鼠标真正单击在上传控件的按钮上浏览到的文件才可以上传(否则，只要你进入我的页面，我就可以随心所欲的得到你的私密文件)。看来此路又是不通，不过不要丧气，运行一下下面的代码看看：

<script> function fclick(obj){ with(obj){ style.posTop=event.srcElement.offsetTop //设置透明上传框的Y坐标跟模拟按钮的Y坐标对齐 style.posLeft=event.x-offsetWidth/2 //设置透明上传框的X坐标为鼠标在X轴上的坐标加上它的宽的一半(确保点击时能点中透明上传框的按钮控件)，这里只是提供一种思路，其实还可以更精确的控制它的X坐标范围 } } </script> <style> input{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px} </style> <form method="post" action="" enctype="multipart/form-data"> <input id="f_file">&nbsp;<input type="button" onmouseover="fclick(t_file)" value="选择上传文件"> <input name="upload" type="file" style="position:absolute;filter:alpha(opacity=0);width:30px;" id="t_file" onchange="f_file.value=this.value" hidefocus> <br><input type="submit" value="提交"> </form>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

直接看代码一时可能还明白不过来，可以把上传框的透明度增加到百分之三十再看看效果(或者看这里的讨论：http://bbs.blueidea.com/viewthread.php?tid=1118701)：

<script> function fclick(obj){ with(obj){ style.posTop=event.srcElement.offsetTop style.posLeft=event.x-offsetWidth/2 } } </script> <style> input{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px} </style> <form method="post" action="" enctype="multipart/form-data"> <input id="f_file">&nbsp;<input type="button" onmouseover="fclick(t_file)" value="选择上传文件"> <input name="upload" type="file" style="position:absolute;filter:alpha(opacity=30);width:30px;" id="t_file" onchange="f_file.value=this.value" hidefocus> <br><input type="submit" value="提交"> </form>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

提示：要更精确的控制透明上传框的X坐标，可把脚本部分修改一下：

<script> function fclick(obj){ with(obj){ style.posTop=event.srcElement.offsetTop var x=event.x-offsetWidth/2 if(x<event.srcElement.offsetLeft)x=event.srcElement.offsetLeft if(x>event.srcElement.offsetLeft+event.srcElement.offsetWidth-offsetWidth)x=event.srcElement.offsetLeft+event.srcElement.offsetWidth-offsetWidth style.posLeft=x } } </script> <style> input{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px} </style> <form method="post" action="" enctype="multipart/form-data"> <input id="f_file">&nbsp;<input type="button" onmouseover="fclick(t_file)" value="选择上传文件"> <input name="upload" type="file" style="position:absolute;filter:alpha(opacity=30);width:30px;" id="t_file" onchange="f_file.value=this.value" hidefocus> <br><input type="submit" value="提交"> </form>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

P.S:0_0第一次写教程，有些解释可能不规范，不过有砖头就快扔，最好是拣金砖扔来，砸死也值

lotusky

不错……
一直想修改上传里的“浏览”的字样
根据IE的默认语言不是太方便

这个教程正好用上

艳艳于飞

我该如何发表论坛，我没有看到这个功能呀，我只能做回复，我希望你可以答复我！

dyce

hao !

wla0254

我上次在电脑报上也看到了这文章，总觉得有问题，呵呵

按文章的方法应该能自动上传文件，可是想想不可能啊，原来他真的是有错误的，这篇文章还被《计算机应用文摘》转载过。我一开始还兴奋了好一阵子呢

tao924934

是不是要有动态网页支持才可以真正地把文件上传上去？？

代号猎鹰

唉

谢天谢地

我终于找到了

太谢谢楼主了````````

我佛山人 楼主

tao924934在上个帖子中说

是不是要有动态网页支持才可以真正地把文件上传上去？？

这不是问题所在

有个fire人

最后一个脚本执行有点问题
重影
不过
好东西一定要顶

killua

有个fire人在上个帖子中说

最后一个脚本执行有点问题
重影

的确有这个问题呢..

我佛山人 楼主

是为了让你们看清楚一点，把上传控件的透明度设为30%了
<input name="upload" type="file" style="position:absolute;filter:alpha(opacity=30);width:30px;" id="t_file" onchange="f_file.value=this.value" hidefocus>

nightproII

楼上高人,请问SELECT框能否改呀,它的属性在CSS里是哪一项呀!

车仔

我佛山人在上个帖子中说

  
点击"上传文件"按钮后再提交表单，可以看到，真正的上传框的内容被清空了，意思就是说，这样模拟出来的上传框没有任何意义，因为没办法上传文件。

  

不是很明白你句话的含义。

1. <input type="submit" onclick="f_file.value=''">

复制代码

加个事件让文本框在提交的时候清空应该是可以的。看下面的代码。
不过能不能上传就不清楚了。因为看不到你上传的代码。

<style> .file{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px} </style> <form method="post" action="" enctype="multipart/form-data"><input type="text" class="file" id="f_file"><input type="button" value="上传文件" class="file" onClick="t_file.click()"> <input name="upload" type="file" id="t_file" onchange="f_file.value=this.value"> <input type="submit" onclick="f_file.value=''"> </form>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

myhyli

你点了提交按钮就知道了，file框的内容会自动清空

车仔

我还是不明白他和你的意思。
点了提交按钮，file框的内容会自动清空
这跟上传有什么关系

cloudchen

清空了就不能上传了

lbf1006

不错不错,都是高手啊

xiaoyi3038

好东西~

xiaoyi3038

那这样一来是不是上传都要靠组件了？

marvellous

只是对文件上传框的样式做了修饰，但不能真正上传，即不能真正打开本地文件。

伟仔

引用:
--------------------------------------------------------------------------------

点击"上传文件"按钮后再提交表单，可以看到，真正的上传框的内容被清空了，意思就是说，这样模拟出来的上传框没有任何意义，因为没办法上传文件。

--------------------------------------------------------------------------------
我也有這問題，請問在不用點擊瀏覽按扭和在file里寫入文件路徑的情況下，怎么模拟上傳？

chyf1982

不知道个算不算老贴！
我想问的是。能不能把“浏览”两个字改了？
我想写英文版的时候，用”浏览“没有“view”来的好吧？

Sheneyan

应该强调过很多次了，不要顶老帖，对老帖有疑问，就开新帖，然后给个链接到老帖。

关于你的的问题，英文的操作系统自然会显示英文的browse