Home > Backend Development > PHP Tutorial > javascript - jquery 如何打开input的file选择框?

javascript - jquery 如何打开input的file选择框?

WBOY
Release: 2016-06-06 20:18:25
Original
1529 people have browsed it

我先是写了一个

然后我写了一个a标签,在jquery 写的内容是

<code>$('a').on('click', '', function() {
    $('#fileupdate').click();
});</code>
Copy after login
Copy after login

但是吧,点击后没有任何的反应?


好吧,最终只能用abs定位解决了...效果是实现了,就是有点不开心。

请问大家下,选择文件后,jquery使用什么触发我接下来的操作,比如获取file文件。我使用什么触发?

回复内容:

我先是写了一个

然后我写了一个a标签,在jquery 写的内容是

<code>$('a').on('click', '', function() {
    $('#fileupdate').click();
});</code>
Copy after login
Copy after login

但是吧,点击后没有任何的反应?


好吧,最终只能用abs定位解决了...效果是实现了,就是有点不开心。

请问大家下,选择文件后,jquery使用什么触发我接下来的操作,比如获取file文件。我使用什么触发?

参考此问题
http://segmentfault.com/q/1010000004322570
js 产生的点击事件不能调出上传文件选择框。

你可以观察一下,js 产生的点击事件 event.isTrusted == false,而你在浏览器中真实的点击事件event.isTrusted == true

你可以参考在隐藏的文件输入框上调用click()方法

的确用 Javascript 无法直接触发 file 弹框

但是题主想问的是用a标签触发file弹框

这样就可以

<code><script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>

<input type="file" name="file" id="fileupdate">
<a id="select">select</a>
<script>

    function select(){
        return  $('#fileupdate').click();
    }
    
    $('#select').on('click', '', function() {
        select();
    });
</script></code>
Copy after login

答案是:无解!你无法用任何 Javascript 触发 file 弹框,在任何浏览器都不!

这不是 BUG,这么做是出于安全考虑

不过,你可以通过在a下面创建一个隐藏的input模拟该效果

例子

参考:http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input

a标签- -。语义化呢,为啥不用label,直接for属性设置那个input file就行了,连js都不用

.. 直接去的input元素 创建click事件就可以了

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template