1. 程式人生 > >利用Javascript來修改file型別input標籤的樣式

利用Javascript來修改file型別input標籤的樣式

問題描述:

一般情況下,利用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>


(2)相關的js
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)效果: