js实现点击图片自动提交action的简单方法

 更新时间:2016年10月16日 10:46:42   投稿:jingxian  
下面小编就为大家带来一篇js实现点击图片自动提交action的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

利用js实现点击一张图片,直接上传到指定的action,方法简单,一看就会了,只需要用户点击图片一次就可以实现图片上传功能。主要用到了onclick,  onchange,  display属性,代码可以直接copy用。此代码适合上传单张图片,关于action部分此处没有,这里只简绍页面效果。

html代码

<form action="p1.html" id="form" ENCTYPE="multipart/form-data" method="post">
<input type="file" name="f" style="display:none" id="g" onchange="F_sub()">
<img src="2.jpg" onclick="F_Open_dialog()" >
</form>

js代码

<script type="text/javascript">
    function F_Open_dialog() 
    { 
      document.getElementById("g").click();
      
      
    } 
    function F_sub(){
    	 var v=document.getElementById("g").value;
       if(v=="")return;
       else document.getElementById("form").submit(); 
    }
 </script>

以上就是小编为大家带来的js实现点击图片自动提交action的简单方法全部内容了,希望大家多多支持脚本之家~

相关文章

  • 原生js实现可拖动的登录框效果

    原生js实现可拖动的登录框效果

    本文主要介绍了原生js实现可拖动的登录框效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • JavaScript中的函数重载深入理解

    JavaScript中的函数重载深入理解

    将函数名作为指向函数的指针,有助于理解为什么ECMAScript中没有函数重载的概念,需要的朋友可以参考下
    2014-08-08
  • Node.js API详解之 zlib模块用法分析

    Node.js API详解之 zlib模块用法分析

    这篇文章主要介绍了Node.js API详解之 zlib模块用法,结合实例形式分析了Node.js API中zlib模块基本功能、函数使用方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • vue bootstrap小例子一枚

    vue bootstrap小例子一枚

    这篇文章主要为大家详细介绍了vue bootstrap小例子一枚,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JS 中使用Promise 实现红绿灯实例代码(demo)

    JS 中使用Promise 实现红绿灯实例代码(demo)

    本文通过实例代码给大家介绍了JS 中使用Promise 实现红绿灯效果,在文中给大家介绍了一个promise用法例子,需要的朋友可以参考下
    2017-10-10
  • JavaScript中如何判断一个值的类型

    JavaScript中如何判断一个值的类型

    在js中有一个运算符可以帮助我们判断一个值的类型,它就是typeof运算符。下面通过本文给大家分享JavaScript中如何判断一个值的类型,需要的朋友参考下吧
    2017-09-09
  • javascript不同类型数据之间的运算的转换方法

    javascript不同类型数据之间的运算的转换方法

    这篇文章主要介绍了javascript不同类型数据之间的运算的转换方法,需要的朋友可以参考下
    2014-02-02
  • javascript实现轮显新闻标题链接

    javascript实现轮显新闻标题链接

    这篇文章主要介绍了javascript实现轮显新闻标题链接的相关资料,需要的朋友可以参考下
    2007-08-08
  • Websocket 向指定用户发消息的方法

    Websocket 向指定用户发消息的方法

    这篇文章主要介绍了Websocket 向指定用户发消息的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • js实现登录弹框

    js实现登录弹框

    这篇文章主要为大家详细介绍了js实现登录弹框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08

最新评论