打破文件框的“禁区”

数码时尚

姚恺丰

　　在HTML各表单元素中，就数文件框最为特殊了，既不能改变文件框按钮上的“浏览到…”这几个字，又不能对文件框的value设定默认值(微软是出于对客户端用户信息安全方面的考虑，将此属性屏蔽了)。既然一般的办法无法达到目的，那就只能采用“非常规”的手段啦，至于具体的做法嘛，接下来我会一一列举出来。

　　1.改变、美化文件框按钮

　　默认文件框按钮上的“浏览到…”是无法改变的，但借助DHTML动态HTML语言，则只需二三句代码就可以用别的文字来替代了。

　　在本例中是将按钮上的文字进行了改变，也可以采用图片或是超链接文字等其他形式，给文件框按钮来个彻底变样。

　　＜style type="text/css"＞

　　.file1{display:none}

　　＜/style＞

　　＜script＞

　　function up(obj){

　　with(obj){

　　obj.upload.click();

　　obj.str.value=obj.upload.value;

　　}

　　}

　　＜/script＞

　　＜form name="form1"＞

　　＜input type="text" name="str"＞

　　＜input type="button" value="现在是点击我来上传" onclick="up(this.form)"＞

　　＜input type="file" name="upload" class="file1"＞

　　＜/form＞

　　2.给文件框设置初始值

　　当然，正如开始所说的，真正的文件框并不能设置初始值，在这里使的只不过是“障眼法”。给文本框设置初始值，同时隐藏掉文件框，只留下文件框按钮，一旦使用者点击文件框按钮获取到了本地文件路径，再将文件框的值赋回给文本框，真正实现了一种以假乱真的效果。下面就来看看具体代码：

　　＜style type="text/css"＞

　　.sp1{width:152px;overflow:hidden}

　　.sp1 .file1{width:0px;margin-left:-4px}

　　＜/style＞

　　＜form name="form1"＞

　　＜span class="sp1"＞＜input name="str" value="C:\Windows\Win.ini"＞＜/span＞

　　＜span class="sp1"＞

　　＜input type="file" class="file1" onpropertychange="form1.str.value=this.value"＞

　　＜/span＞

　　＜/form＞