我有一個<img ... />
標記,我已經在jQuery中綁定了一個單擊事件。點擊時,我想讓它模擬點擊文件上傳按鈕以打開文件系統瀏覽彈出窗口。我已經試過這些東西的點擊功能內,並沒有成功:在jQuery中模擬文件上傳點擊
...
$(".hiddenUploadBtn").click();
...
...
$(".hiddenUploadBtn").select();
...
...
$(".hiddenUploadBtn").submit();
...
我有一個<img ... />
標記,我已經在jQuery中綁定了一個單擊事件。點擊時,我想讓它模擬點擊文件上傳按鈕以打開文件系統瀏覽彈出窗口。我已經試過這些東西的點擊功能內,並沒有成功:在jQuery中模擬文件上傳點擊
...
$(".hiddenUploadBtn").click();
...
...
$(".hiddenUploadBtn").select();
...
...
$(".hiddenUploadBtn").submit();
...
只是包裝的IMG的標籤,並設置爲屬性到文件輸入。適用於任何類型的內容,並且內置於規範中。你甚至可以隱藏文件輸入。
<input type="file" id="fileUpload"><br>
<label for="fileUpload">
<img src="https://www.google.com/images/srpr/logo11w.png" />
</label>
該規範說,它應該工作,和它,在Chrome。但是,Firefox和其他常見瀏覽器不遵循規則,因此您是SOL。
請發佈一個指向你所指的規範的鏈接。此外,「spec」和瀏覽器實現之間也有區別。例如,是否所有瀏覽器都按照規範進行CSS渲染?很明顯不是。所以只是因爲規範說它應該工作並不意味着瀏覽器讓它工作。 – 2010-11-09 20:15:27
這對我的作品
<input name="picture" type="file" onchange="alert(this.value)" class="file" size=20/>
使用上傳按鈕圖像試試這個
<style>
div.fileinputs {position:relative; display:inline;}
div.fakefile {position:absolute; top:0px; left:0px; z-index:1;}
input.file {position:relative; text-align:right; -moz-opacity:0; filter:alpha(opacity: 0); opacity: 0; z-index:2;}
<style>
<div class="fileinputs">
<input name="picture" type="file" onchange="alert(this.value)" class="file" size=1/>
<div class="fakefile">
<img src="images/browse.gif" align="middle" alt="browse" title="browse"/>
</div>
</div>
所以輸入字段是隱藏的,當u點擊圖像 - 出現選擇對話框,而是效仿從js這個對話是不可能的,是的。 但你也可以寫插件/黑客對瀏覽器)
使用試試這個只有JavaScript: http://code.google.com/p/upload-at-click/
這是基於PHP的,有些人沒有在尋找PHP解決方案。 – Chexpir 2013-02-15 07:24:31
你應該接受亞當麥考密克的新答案,這個答案顯然是正確的。我想刪除我的,但我無法接受答案。 – RichieHindle 2014-03-13 08:54:51
已接受的答案已更新。感謝您的評論。 – 2014-03-14 13:31:52