在開發中，文件上傳必不可少，<input type="file" /> 是常用的上傳標簽，但是它長得又丑、浏覽的字樣不能換，我們一般會用讓，<input type="file" />隱藏，點其他的標簽（圖片等）來時實現選擇文件上傳功能。
看代碼： 復制代碼 代碼如下:
<!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 實現 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 實現 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關鍵字，兼容性提高了不少，但是有的浏覽器還是不好用。
我們發現只有手動點擊<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 實現 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"標記才能上傳文件