修改file按鈕的默認樣式實現(xiàn)代碼
更新時間：2013年04月23日 16:10:17 作者：
file按鈕作為上傳文件使用，不過默認的樣式確實讓人不敢恭維啊，如何才可以修改為漂亮一點的呢？接下來與大家分享下具體的實現(xiàn)代碼，感興趣的朋友可以參考下哈
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>添加附件</title>
</head>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript">
function fclick(obj){
style.posTop=event.srcElement.offsetTop
style.posLeft=event.x-offsetWidth/2
}
$(function(){
$("#addFile").click(function(){
var br = $("<br>");
var input1 = $("<input id='inputrecievedocument' type='text'/>");
var input2 = $("<input type='button' style='margin-left:5px;background-color:blue' id='btnrecievedocument' onmouseover='fclick(t_file)' value='瀏覽'/>");
var input3 = $("<input name='upfile' type='file' style='position:absolute;filter:alpha(opacity=0);width:70px;' id='t_file' onchange='inputrecievedocument.value=this.value' hidefocus/>");
var button = $("<input type='button' value='刪除' style='margin-left:5px;background-color:blue'/>");
$("#file").append(br).append(input1).append(input3).append(input2).append(button);
button.click(function() {
br.remove();
input1.remove();
input2.remove();
input3.remove();
button.remove();
});
});
});
</script>
<body class="body">
<form method="post" action="" enctype="multipart/form-data">
<input type="button" value="添加附件" class="btn_fujian" id="addFile" style="margin-left:20px;margin-top:2px;"/>
<div id="file"></div>
</form>
</body>
</html>
IE9中運行如下：
相關文章
微信公眾號平臺接口開發(fā) 獲取access_token過程解析
這篇文章主要介紹了微信公眾號平臺接口開發(fā) 獲取access_token過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
uniapp中使用vuex的過程(解決uniapp無法在data和template中獲取vuex數(shù)據(jù)問題)
這篇文章主要介紹了uniapp中使用vuex（解決uniapp無法在data和template中獲取vuex數(shù)據(jù)問題）,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
JS的encodeURI和java的URLDecoder.decode使用介紹
如果不想在url中看到有明文可以使用js的encodeURI的URLDecoder.decode一起使用一起來把url加密下，下面有個不錯的示例，大家不妨參考下2014-05-05
用js實現(xiàn)每隔一秒刷新時間的實例(含年月日時分秒)
下面小編就為大家?guī)硪黄胘s實現(xiàn)每隔一秒刷新時間的實例(含年月日時分秒)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
在服務器端的單元測試中，都有各種各樣的測試框架，在JavaScript中現(xiàn)在也有一些很優(yōu)秀的框架，但在本文中，我們將自己動手一步步來實現(xiàn)一個簡單的單元測試框架2012-04-04
瀑布流布局,是一種視覺表現(xiàn)為參差不齊的多欄布局,常用于內(nèi)容以圖片為主的頁面展示,本文將使用css和js兩種方式來實現(xiàn)瀑布流布局,需要的可以參考下2023-11-11
js實現(xiàn)一維數(shù)組轉(zhuǎn)化為二維數(shù)組兩種簡單方法
在日常開發(fā)中我們可能會遇到返回的數(shù)據(jù)不能直接使用,而數(shù)據(jù)提供者只給你傳遞二維數(shù)據(jù)格式的數(shù)據(jù),這個時候就需要我們做轉(zhuǎn)換,這篇文章主要給大家介紹了關于js實現(xiàn)一維數(shù)組轉(zhuǎn)化為二維數(shù)組的兩種簡單方法,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了JS文件中加載jquery.js的方法，JS文件添加其他JS的實例代碼，感興趣的小伙伴們可以參考一下，具體如下2018-05-05
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)簡單計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
javascript中關于&& 和 || 表達式的小技巧分享
我將會介紹和解析12個簡單但是強大的JavaScript技巧. 這些技巧所有的JavaScript程序員都可以馬上使用, 你不需要成為JavaScript高手才能理解這些.下面我們開始本系列的第一篇文章，介紹下強大的&& 和 || 表達式2015-04-04