有沒有辦法打開文件對話框,上傳文件,上的按鈕或圖像,或鏈接的點擊..定製的瀏覽按鈕
例如:
<a href="" onclick="openDialogBox('fileID')....." /> Select File To Upload</a>
<input type="file" id="fileID" />
我需要最簡單的例子,可以在所有瀏覽器中使用。我喜歡使用純javascript或ajax。
有沒有辦法打開文件對話框,上傳文件,上的按鈕或圖像,或鏈接的點擊..定製的瀏覽按鈕
例如:
<a href="" onclick="openDialogBox('fileID')....." /> Select File To Upload</a>
<input type="file" id="fileID" />
我需要最簡單的例子,可以在所有瀏覽器中使用。我喜歡使用純javascript或ajax。
這是我所處理的只是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的文件輸入。因此,輸入對用戶是不可見的,但是當他們點擊容器時,輸入點擊事件將按預期觸發。
你可以做什麼,使這個適應自己的需要:
祝你好運!
是的,這是可能的,AJAX是不相關的。代碼將是:
<a href="#" onclick="document.getElementById('fileID').click(); return false;" /> Select File To Upload</a>
它可能無法在某些瀏覽器,我寫quick test工作正常在Chrome 15(測試版),IE9和Firefox 6,所以我想這涵蓋了大部分現代瀏覽器。
編號((還有9個以上)) – Zirak