我有一个<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