html文件上傳控件file自定義樣式


html文件上傳控件file自定義樣式

 

問題:

HTML自帶的file上傳按鈕因在各種瀏覽器里顯示樣式不一、不易自定義樣式給我們帶來很大的麻煩。

 

解決思路:

將input[type=file]控件隱藏,使用一個input[type=text]和button組合作為file控件的替代(樣式自行定義),並將隱藏的file控件和作為替代的text和button控件做事件同步關聯,這樣我們在操作text和button的時候,同時觸發file控件,表單提交時,file控件提交。

 

示例代碼:

復制代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上傳</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</head>
<body>
<form name="frm" id="frm" action="/remote_service/upload2/parseRuleFilePath.htm" method="post" enctype="multipart/form-data">
    <input type="text" name="fileShowName" id="fileShowName" readonly="readonly" />
    <!-- 按鈕的onclick事件關聯file的onclick事件,點擊按鈕效果等同於點擊file控件 -->
    <input type="button" id="fileButton" name="fileButton" value="瀏覽" onclick="$('#submitFile').click();" />
    <!-- 隱藏的file控件值改變時同步更新到text上 -->
    <input name="submitFile" id="submitFile" type="file" style="display: none;"
                   onchange="$('#fileShowName').val($(this).val());" />
    <input type="submit" value="提交" />
</form>
</body>
</html>
復制代碼
 
          
 
          
 
         
 
你的一點點建議或鼓勵都是對我莫大的支持


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM