2009-07-15 70 views
5

我有一個<img ... />標記,我已經在jQuery中綁定了一個單擊事件。點擊時,我想讓它模擬點擊文件上傳按鈕以打開文件系統瀏覽彈出窗口。我已經試過這些東西的點擊功能內,並沒有成功:在jQuery中模擬文件上傳點擊

... 
$(".hiddenUploadBtn").click(); 
... 

... 
$(".hiddenUploadBtn").select(); 
... 

... 
$(".hiddenUploadBtn").submit(); 
... 
+0

你應該接受亞當麥考密克的新答案,這個答案顯然是正確的。我想刪除我的,但我無法接受答案。 – RichieHindle 2014-03-13 08:54:51

+0

已接受的答案已更新。感謝您的評論。 – 2014-03-14 13:31:52

回答

5

只是包裝的IMG的標籤,並設置爲屬性到文件輸入。適用於任何類型的內容,並且內置於規範中。你甚至可以隱藏文件輸入。

<input type="file" id="fileUpload"><br> 
<label for="fileUpload"> 
    <img src="https://www.google.com/images/srpr/logo11w.png" /> 
</label> 
-1

該規範說,它應該工作,和它,在Chrome。但是,Firefox和其他常見瀏覽器不遵循規則,因此您是SOL。

+2

請發佈一個指向你所指的規範的鏈接。此外,「spec」和瀏覽器實現之間也有區別。例如,是否所有瀏覽器都按照規範進行CSS渲染?很明顯不是。所以只是因爲規範說它應該工作並不意味着瀏覽器讓它工作。 – 2010-11-09 20:15:27

2

這對我的作品

<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這個對話是不可能的,是的。 但你也可以寫插件/黑客對瀏覽器)