利用Javascript來修改file型別input標籤的樣式
阿新 • • 發佈:2019-01-29
問題描述:
一般情況下,利用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)效果: