在開發中，檔案上傳必不可少， 是常用的上傳標籤，但是它長得又醜、瀏覽的字樣不能換，我們一般會用讓，隱藏，點其他的標籤（圖片等）來時實現選擇檔案上傳功能。
看代碼：
<!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關鍵字，相容性提高了不少，但是有的瀏覽器還是不好用。
我們發現只有手動點選後台就一定能取得到要上傳的檔案
於是我們可以透明
修改程式碼如下：
<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的，單一使用者切看不到後台亦可以取得要上傳的檔案了。
ok
總結：
用一個不透明度為0的 蓋在要使用者可見的標籤（或圖片等）上，讓使用者點擊。
用 width height line-height font-size 來控制右側瀏覽按鈕的大小。
用 left top （right 、 bottum）來控制右側瀏覽按鈕的位置，可以設定為負值。
用z-index來設定它們的層覆蓋關係。
form 必須有enctype="multipart/form-data"標記才能上傳檔案
更多js 實作 input type="file" 檔案上傳範例程式碼相關文章請關注PHP中文網！
