我们在程序开发中，经常要用到上传文件的功能。但是，<input type="file" id="f" name="f">这个类型的元素，产生的文件框和浏览按扭，它们的样式往往不符合我们的需要。怎么样才能控制控制它们的样式和位置呢？
 
  解决思路：
   1、放一个text类型的文本框。
   2、放一个button类型的按扭。
   3、放一个file类型。
   4、调整button和file的样式，目标：将file隐藏，使其位置和button位置重叠。
   5、当上传框file的值有所改变时通过onchange事件句柄执行text.value=this.value，即保持真正的上传框与模拟的上传框的值同步更新。
   总结：上传框带有两个控件：一个文本框和一个按钮。定义的样式对文本框全部生效，对于按钮，只有边框样式、字体大小和外观尺寸生效。看来直接用CSS定义它的外观是行不通的。我们知道，大部分控件都有一个单击(click)事件句柄，上传框在单击"浏览..."按钮时会弹出"选择文件"对话框，如果我们自己模拟一个上传框：一个文本框(<input type="text">)和一个按钮(<input type="button">或<button>Text</button>)，在单击自定义按钮时同时触发上传框的click事件让它弹出"选择文件"对话框... ...。在点击"上传文件"按钮时执行t_file.click()，当上传框的值有所改变时通过onchange事件句柄执行f_file.value=this.value，即保持真正的上传框与模拟的上传框的值同步更新，style="display:none"让真正的上传框隐藏，使模拟的文件上传框能以假乱真------。
   代码示例：
   <style>input{border:1px solid green;}
    div {width:300px;position:relative;}
    p {float:left}
    .file {position:absolute;top:20px;right:300px;+top:0;+right:73px;width:0px;height:20px;
        filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}
    #txt {height:20px;margin:1px}
    #ii {width:70px;height:20px;margin-top:2px;border:none;}
  </style>

  <div>
     <form method="post" action="" enctype="multipart/form-data">
     <p><input type="text" id="txt" name="txt" /></p>
     <p><input id="ii" type="image" src="uploads/200702/05_125319_index_search_02.gif" value="选择" /></p>
     <p><input type="file" onchange="txt.value=this.value" class="file" /></p>
    </form>
</div>

具体可以参照：http://blog.ha371.com/article.asp?id=34&page=3