[心得] 關於 MSIE 以外上傳檔案表單的美化

看板Web_Design作者gpmm (銀色)時間19年前 (2005/06/07 16:06)推噓1(1推 0噓 0→)

留言1則, 1人參與討論串1/1

不知道大家有沒有這種困擾，在製作網頁時，遇到要上傳檔案的部分，總會覺得那個上傳檔案的表單（<input type="file">）實在不是挺好看。雖然 IE 中的這個部分可以使用 CSS 改變，但是 MSIE 以外的瀏覽器就幾乎無法支援。如果今天是對於要製作，支援各家瀏覽器的網頁，那麼單用 CSS 就無法改善所有的情況，畢竟現在使用 FireFox/Mozilla 也越來越多了。小弟也曾經試過利用一般的 button 的 onClick 來觸發隱藏起來（display="none"）的 <input type="file">。但是很遺憾，MSIE 以外的瀏覽器基於安全考量，也幾乎無法以 javascript 使用物件的 click()。不過今天小弟誤打誤撞找到一個他人提供的解決的技術，於是上來和大家分享一下。（其實比較擔心大家都已經知道了然後看小弟在這裡耍笨… orz） --------------------- 以下正文線 -------------------- 如果說這個不屌的話，那真的沒什麼屌了… http://www.quirksmode.org/dom/inputfile.html For MSIE 以外的檔案上傳修飾。自己測試成功的修改過的內容： test.php --------------------- <style type="text/css" media="all"> div.fileinputs { position: relative; } div.fakefile { position: absolute; top: 0px; left: 0px; z-index: 1; } input.file { position: relative; text-align: left; -moz-opacity:0 ; filter:alpha(opacity: 0); opacity: 0; z-index: 2; } </style> <div class="fileinputs"> <input size="16" type="file" class="file" onChange="document.getElementById('filepath').value = this.value;"> <div class="fakefile"> <input size="16" id="filepath"> <input size="4" type="button" value="上傳"> </div> </div> --------------------- 以上正文線 -------------------- 另：網頁中的 input.file CSS 是使用 text-align: right;，但小弟以 FireFox 測試過後，原本被隱藏起來的上傳按鈕會漂流到視窗的最右邊，所以小弟改成 text-align: left; -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 163.13.128.240