在項目過程中遇到的需要上傳本地文件，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("");
}
});
}
這是本人使用過程中的一些解決方法，如有錯誤請輕噴，謝謝！