Home > Backend Development > PHP Tutorial > javascript - HTML点击图片出现选择文件框并能够提交表单进行验证

javascript - HTML点击图片出现选择文件框并能够提交表单进行验证

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release: 2016-06-06 20:34:13
Original
1149 people have browsed it

今天 看了大神写的代码 能够出现选择文件框 但是选择之后怎么提交表单来进行验证呢?

代码如下 :

<code><script type="text/javascript">
    function F_Open_dialog() 
   { 
        document.getElementById("btn_file").click(); 
   } 

</script>

<div>

    <input type="file" id="btn_file" style="display:none">
    <img  src="images/default.gif" onclick="F_Open_dialog()" alt="javascript - HTML点击图片出现选择文件框并能够提交表单进行验证" >

</div>
</code>
Copy after login
Copy after login

回复内容:

今天 看了大神写的代码 能够出现选择文件框 但是选择之后怎么提交表单来进行验证呢?

代码如下 :

<code><script type="text/javascript">
    function F_Open_dialog() 
   { 
        document.getElementById("btn_file").click(); 
   } 

</script>

<div>

    <input type="file" id="btn_file" style="display:none">
    <img  src="images/default.gif" onclick="F_Open_dialog()" alt="javascript - HTML点击图片出现选择文件框并能够提交表单进行验证" >

</div>
</code>
Copy after login
Copy after login

监听 input file onchange 事件,触发 form submit 事件。

<code>var btnFile = document.getElementById("btn_file");
btnFile.onchange = function() {
    this.form.submit();
}
</code>
Copy after login
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