標籤：好用 上傳 body 位置 color pointer set 相容性 html
在開發中，檔案上傳必不可少但是它長得又醜、瀏覽的字樣不能換，一般會讓其隱藏點其他的標籤（圖片等）來時實現選擇檔案上傳功能
在開發中，檔案上傳必不可少，<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>
但是在Firefox和一些高版本的瀏覽器中後台可以擷取到要上傳的檔案，一些低版本的瀏覽器壓根就擷取不到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"標記才能上傳檔案
js 實現 input type="file" 檔案上傳範例程式碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
