js 實現(xiàn) input type="file" 文件上傳示例代碼

更新時間：2013年08月07日 15:51:28 作者：

在開發(fā)中，文件上傳必不可少但是它長得又丑、瀏覽的字樣不能換，一般會讓其隱藏點其他的標簽（圖片等）來時實現(xiàn)選擇文件上傳功能

在開發(fā)中，文件上傳必不可少，<input type="file" /> 是常用的上傳標簽，但是它長得又丑、瀏覽的字樣不能換，我們一般會用讓，<input type="file" />隱藏，點其他的標簽（圖片等）來時實現(xiàn)選擇文件上傳功能。
看代碼：

復制代碼代碼如下:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="js/jquery/jquery-1.8.2.min.js" type="text/javascript"></script> 
<style type="text/css"> 
._box 
{ 
width: 119px; 
height: 37px; 
background-color: #53AD3F; 
background-image: url(images/bg.png); 
background-repeat: no-repeat; 
background-position: 0 0; 
background-attachment: scroll; 
line-height: 37px; 
text-align: center; 
color: white; 
cursor: pointer; 
} 
.none 
{ 
width: 0px; 
height: 0px; 
display: none; 
} 
</style> 
<title>js 實現(xiàn) input file 文件上傳 /></title> 
</head> 
<body> 
<form id="form1" runat="server" method="post" enctype="multipart/form-data"> 
<div> 
<div class="_box">選擇圖片</div> 
</div> 
<div class="none"> 
<input type="file" name="_f" id="_f" /> 
</div> 
</form> 
</body> 
</html> 
<script type="text/javascript"> 
jQuery(function () { 
$("._box").click(function () { 
$("#_f").click(); 
}); 
}); 
</script> 

但是在火狐和一些高版本的瀏覽器中后臺可以獲取到要上傳的文件，一些低版本的瀏覽器壓根就獲取不到Request.Files
查閱資料，有說改成這樣的：

復制代碼代碼如下:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="js/jquery/jquery-1.8.2.min.js" type="text/javascript"></script> 
<style type="text/css"> 
._box 
{ 
width: 119px; 
height: 37px; 
background-color: #53AD3F; 
background-image: url(images/bg.png); 
background-repeat: no-repeat; 
background-position: 0 0; 
background-attachment: scroll; 
line-height: 37px; 
text-align: center; 
color: white; 
cursor: pointer; 
} 
.none 
{ 
width: 0px; 
height: 0px; 
display: none; 
} 
</style> 
<title>js 實現(xiàn) input file 文件上傳 /></title> 
</head> 
<body> 
<form id="form1" runat="server" method="post" enctype="multipart/form-data"> 
<div> 
<div class="_box">選擇圖片</div> 
</div> 
<div class="none"> 
<input type="file" name="_f" id="_f" /> 
</div> 
</form> 
</body> 
</html> 
<script type="text/javascript"> 
jQuery(function () { 
$("._box").click(function () { 
return $("#_f").click(); 
}); 
}); 
</script> 

加了一個return關鍵字，兼容性提高了不少，但是有的瀏覽器還是不好用。
我們發(fā)現(xiàn)只有手動點擊<input type="file" />后臺就一定能獲取到要上傳的文件
于是我們可以透明<input type="file" />
修改代碼如下：

復制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
._box 
{ 
position: relative; 
width: 119px; 
height: 37px; 
background-color: #53AD3F; 
background-image: url(images/bg.png); 
background-repeat: no-repeat; 
background-position: 0 0; 
background-attachment: scroll; 
line-height: 37px; 
text-align: center; 
color: white; 
cursor: pointer; 
overflow: hidden; 
z-index: 1; 
} 
._box input 
{ 
position: absolute; 
width: 119px; 
height: 40px; 
line-height: 40px; 
font-size: 23px; 
opacity: 0; 
filter: "alpha(opacity=0)"; 
filter: alpha(opacity=0); 
-moz-opacity: 0; 
left: -5px; 
top: -2px; 
cursor: pointer; 
z-index: 2; 
} 
</style> 
<title>js 實現(xiàn) input file 文件上傳 /></title> 
</head> 
<body> 
<form id="form1" runat="server" method="post" enctype="multipart/form-data"> 
<div> 
<div class="_box"> 
<input type="file" name="_f" id="_f" /> 
選擇圖片 
</div> 
</div> 
</form> 
</body> 
</html> 

我們點擊選擇圖片實際點擊了不透明度為0的 <input type="file" />，單用戶切看不到 <input type="file" />后臺亦可以獲取到要上傳的文件了。
ok
總結：
用一個不透明度為0的 <input type="file" />蓋在要用戶可見的標簽（或圖片等）上，讓用戶點擊。
用 width height line-height font-size 來控制<input type="file" />右側瀏覽按鈕的大小。
用 left top （right 、 bottum）來控制<input type="file" />右側瀏覽按鈕的位置，可以設置為負值。
用z-index來設置它們的層覆蓋關系。
form 必須有enctype="multipart/form-data"標記才能上傳文件

您可能感興趣的文章: