2009-07-15 65 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这个对话是不可能的,是的。 但你也可以写插件/黑客对浏览器)