使用普通按钮代替input file

使用普通按钮代替input file（转）2009-11-29 05:03今同事问了个关于触发input type=file控件的问题，当时看似简单可是一下子又没搞定，百思不得其解，回来试了一下，终于找到问题，赶紧整理篇文章说道说道。其实很简单，哈哈！

   

<input type="file" > 这个控件是创建文件上载用的，该控件带有一个文本框和一个浏览按钮。一般我们要涉及到这方面的开发的时候

都会用到这个控件。

简单实现：

像如下代码片段，我们轻松实现了这个上传文件的页面制作

 

<form method="post" action="" enctype="multipart/form-data">

<input type="file" id="f2">

<input type="submit" name="submit">

</form>

 

来点颜色：

可是，现在我们的需求多了一点改变。那个显示文件路径的文本框，我想变得特殊点，有点颜色呀什么的，那么，简单，我们来给这个控件加点style。像如下修改

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

怎么样，有改变了吧。

啥，不好看，那可不是，用CSS来这个控件的外观也就只能改变这么多了，定义的样式对文本框全部生效，对于按钮，只有边框样式、字体大小和外观尺寸生效。

用我们的控件来模仿上传控件：

既然这么不好使，我们就自己来创建个文本框和按钮来代替它，设置文本框控件和按钮控件可是有更多变化。

<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" οnchange="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" οnchange="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"> <input type="button" οnmοuseοver="fclick(t_file)" value="选择上传文件">

<input name="upload" type="file" style="position:absolute;filter:alpha(opacity=0);width:30px;" id="t_file" οnchange="f_file.value=this.value" hidefocus>

<br><input type="submit" value="提交">

</form>

咋的，没看明白？简单，我把那个隐藏的上传控件给你显示点影子，你就明白了

<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"> <input type="button" οnmοuseοver="fclick(t_file)" value="选择上传文件">

<input name="upload" type="file" style="position:absolute;filter:alpha(opacity=30);width:30px;" id="t_file" οnchange="f_file.value=this.value" hidefocus>

<br><input type="submit" value="提交">

</form>

呵呵，还要求准确点，要求还真高，好，我再改改脚本！

<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"> <input type="button" οnmοuseοver="fclick(t_file)" value="选择上传文件">

<input name="upload" type="file" style="position:absolute;filter:alpha(opacity=30);width:30px;" id="t_file" οnchange="f_file.value=this.value" hidefocus>

<br><input type="submit" value="提交">