問題描述：

一般情況下，利用file型別的input瀏覽選擇檔案，再配合form就可以實現檔案的上傳功能。實現出的效果如下圖：（以csdn寫部落格上傳圖片時的瀏覽框為例）

在實際的開發情況中，為了配合整個網頁的風格，也為了讓瀏覽框更美觀，需要對file型別的input進行樣式修改。但由於input中的“瀏覽”按鈕是由html根據input的type解析出來的，沒辦法直接使用css對齊進行位置上的修改，這就給開發帶來一定的麻煩。為了解決這個問題，我們可以使用javascript配合html來進行處理。

主要思想：

（1）將file型別的input進行隱藏

（2）根據需要放置新的按鈕和text型的input

（3）將新放置的按鈕與input跟隱藏掉的file型input關聯到一起，當點選新設定的按鈕時會觸發file型input的瀏覽按鈕。並將所選檔名稱顯示在新設定的text型input上。

實現程式碼：

（1）HTML設定上傳檔案的form和input等元素

<form id="upload-form" action="" method="post" enctype="multipart/form-data" name="form">
	<div style="float:left;width:100%">
		<input id="fname" type="text"  tabindex="1" style="float:left;width:80%;height:40px;border:1px solid #34495E"/><!--用於顯示上傳檔名的input-->
		<input id="up_file" name="up_file" type="file"  style="display:none" required="required" onchange="document.getElementById('fname').value=this.value"/><!--實際起作用的file型input-->
		<input type="button" name="submit" style="float:left;width:10%;height:40px;border:1px solid #34495E;background-color:#34495E;color:#ffffff" value="瀏覽" onclick="select_file();"/><!--用於觸發file型input瀏覽按鈕的button-->
		<input type="submit" name="submit" style="float:left;width:10%;height:40px;border:1px solid #34495E;background-color:#34495E;color:#ffffff" value="上傳"/>
	</div>
</form>

function select_file(){
        document.getElementById("up_file").click();
	var name = document.getElementById("up_file").value;
}

給file型input新增一個onchange事件，當內容發生改變時將其中的值，也就是選擇的檔名稱傳到text型input當中顯示出來。給瀏覽按鈕新增onclick事件，當點選新設定的“瀏覽”按鈕時，觸發js函式select_file，實際是讓file型別的input被點選。從而瀏覽並選擇檔案。

（3）效果：