在项目过程中遇到的需要上传本地文件，file的原始控件不太美观，但是这个控件和button有点不太一样，

改变这个样式的思路就是在控件外面套一层链接，然后把file控件的透明度设置为0(透明)。样式只需要对外面那层进行操作就行。

html代码：

<td style="text-align: left;">
<a href="javascript:;" class="file">选择文件
<input type="file" name="fi" id="f">
</a>
</td>

css代码：

.file {
position: relative;
display: inline-block;
background: rgb(125, 146, 174);
border: 0px solid rgb(125, 146, 174);
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #fff;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}

效果图：

由于点击选择文件change事件只响应一次，就是说相同的文件名称的文件或者同一个文件在修改以后不刷新页面就点击提交时时不会再次响应的。

如果这里使用的是click事件，需要点击提交以后再点击选择文件才会生效。这里我查了很多方法，在谷歌游览器中，file控件的值只能设置为空，不然会报错。

所以这里的思路就是每次点击的时候在file的值设置为空。经过测试，解决了这个问题。

js代码：

function chooseFile(){
$("#f").live('click',function(e){
$("#f").val("");
});//file中是根据空间中的val判断是否change。谷歌游览器中只能把file的val设置为空，设置为其他值会报错，所以这里要增加个click事件
$("#f").live('change',function(e){
var selectedFile = document.getElementById("f").files[0];
var name = selectedFile.name;
$("#filename").val(name);
var reader = new FileReader();
reader.readAsText(selectedFile,"GBK");
reader.onload = function(){
$("#script_content").val(this.result);
$("#script_result").val("");
}
});
}

这是本人使用过程中的一些解决方法，如有错误请轻喷，谢谢！