file标签不同浏览器下，显示效果不一样，且样式比较丑。

使用透明file标签，随心所欲定制自己的上传效果。

<form id="form_upload" action="#" name="form_upload"
enctype="multipart/form-data" method="post" target="iframe_upload">
<div id="upload">
<input id="file_upload" name="file" type="file"
οnchange="uploadChange(this);" hidefocus />
</div>
</form>

firefox下file标签需使用size属性控制大小，比较麻烦，size设置起来也跟width不一样。所以采用file标签外面套一层div，用div来控制整体大小。

#upload {
width: 66px;
height:16px;
overflow: hidden;
z-index: 9999;
display: none;
position: absolute;
cursor: default;
}

#file_upload {
position: absolute;
width: 66px;
filter:alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;

}

div需设置position: absolute;不然ie6下，移动到目标位置的时候，会在页面中原文档位置的地方显示一个空白。

filter:alpha(opacity=0); 这个是为IE6设的，可取值在0-100，其它三个0到1.
opacity: 0; 这是最重要的，因为它是CSS标准.该属性支持firefox, Safari和 Opera.
-moz-opacity:0; 这个是为了支持一些老版本的Mozilla浏览器。
-khtml-opacity: 0; 这个为了支持一些老版本的Safari浏览器。

开始的时候div隐藏，防止不经意点中file框

<span id="a_newFile" class="a-control-margin role-parent-write"><img
src="../p_w_picpaths/button/file_up.png" class="img-control" />上传文件</span> 

这个为显示的点击上传地方

使用jquery添加事件

$("#a_newFile").bind("mouseenter" ,function() {
  $("#upload").offset(that.offset()).show();
})

鼠标移进span的时候将div移动到span上并显示出来。这样透明的file标签就覆盖了span，在span上点击就相当于点击file标签。

到此好像一切都OK了，但ie6下2次选择同一个文件上，onchange方法不调用，而firefox没这个问题。

好吧，完善onchange事件。

function uploadChange(that) {
var uploadForm = $("#form_upload");
uploadForm.attr("action", "上传处理url");
uploadForm.get(0).submit();
that.outerHTML = that.outerHTML;
}

这是选中文件后的onchange事件调用方法，ie下不能直接设置value的值，使用that.outerHTML = that.outerHTML;重新赋值一次，就可以刷新value的值（不懂原理。。。）。

到此一个漂亮的上传文件按钮出现。。。