定製的瀏覽按鈕

Question

有沒有辦法打開文件對話框，上傳文件，上的按鈕或圖像，或鏈接的點擊..

例如：

<a href="" onclick="openDialogBox('fileID')....." /> Select File To Upload</a> 
<input type="file" id="fileID" /> 

我需要最簡單的例子，可以在所有瀏覽器中使用。我喜歡使用純javascript或ajax。

Answer 1

這是我所處理的只是HTML & CSS

的方式（我認爲這是沒有必要的任何JavaScript通過調用）：

<style> 
    span.browse_but { font-family:Arial; width:65px; height:20px; text-align:center; line-height:18px; margin:0px; font-size:10px; font-weight:bold; 
         border:1px solid #ccc; float:left; cursor:pointer; padding:0px; background:#eee; display:block; float:left; overflow:hidden; } 
    span.browse_but font { font-size:16px; color:#c00; } 
    span.browse_but input { position:absolute; cursor:pointer; right:0px; top:0px; height:20px; width:195px; margin:0px; opacity:0; filter:alpha(opacity=0); } 
</style> 

<span style="position:relative;" class="browse_but"> 
    <font style="font-weight:bold; color:#093; position:relative; top:2px; font-size:17px;">+</font> Pick a file 
    <input name="F" type="file" value=""/> 
</span> 

見小提琴這裏：Deal with ugly browse button

策略是在一個位置爲relative的容器內進行opacity = 0和position：absolute的文件輸入。因此，輸入對用戶是不可見的，但是當他們點擊容器時，輸入點擊事件將按預期觸發。

你可以做什麼，使這個適應自己的需要：

• 插入你想放入容器&位置得當的圖像;
• 更改文件的大小輸入&容器以適應圖像;

祝你好運！

Answer 2

是的，這是可能的，AJAX是不相關的。代碼將是：

<a href="#" onclick="document.getElementById('fileID').click(); return false;" /> Select File To Upload</a> 

它可能無法在某些瀏覽器，我寫quick test工作正常在Chrome 15（測試版），IE9和Firefox 6，所以我想這涵蓋了大部分現代瀏覽器。