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的简单方法全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • JSP中的FORM表单中只有一个input文本时，按回车键将会自动提交表单

    一个列表界面只有一个输入框查询条件,当首次进入在输入框中输入汉字后,按回车键发现输入框中汉字变成乱码!本以为一个很简单不过的问题,结果却花了好久才找到原因(据说是浏览器问题),按回车后执行了两次查询. 1.未修改前代码: <form id="ff" name="ff" method="post"> <input type="text" id="userName" name="us

  • JS实现问卷星自动填问卷脚本并在两秒自动提交功能

    JS实现问卷星自动填问卷脚本并在两秒自动提交功能

    脚本只使用问卷星,多选题目前为选中任意选项数量!!!!!!! 最近看到很多群里都在发问卷连接,各种求帮忙,正好这两天没任务,尝试写了自动填问卷的脚本,类似的脚本网上已经有了,但是后来问卷星加了验证,并且多选题已经不能适用 脚本使用方式(以Firefox为例): 一:鼠标移动到浏览器地址栏下空白处,右键,新建书签 二:填写名称(任意),代码复制到地址栏中 三:打开问卷星连接,然后点击刚刚添加的书签,即可. 代码: javascript: void ( (function () { var hash

  • jsp中如何实现按下回车键自动提交表单

    为了省事很多时候希望可以按回车键来提交表单,要控制这些行为,可以借助JS来达到要求. 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="../../common/include_tag.jsp"%> <%@ include fi

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

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

  • js实现点击图片改变页面背景图的方法

    本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>点击图片即改变页面的背景图片</title> </head> <body bgcolor="#FFFFFF" leftmargin="0" marginwidth="0"> <script language=&qu

  • js实现表单多按钮提交action的处理方法

    之前一篇文章介绍了php实现表单多按钮提交action的处理方法,今天再介绍一种js实现表单多按钮提交action的处理方法,希望能够帮助到大家. 用JS实现一个表单多个按钮的方法,两个onclick事件处理,代码如下: <html> <head> <script> function submitit1() //交由程序1处理 { document.myForm.action = "http://www.site.com/cgi1.php" docu

  • js鼠标点击图片实现随机变换图片的方法

    本文实例讲述了js鼠标点击图片实现随机变换图片的方法.分享给大家供大家参考.具体实现方法如下: <html> <title>鼠标点击图片即可随机变换图片</title> <body bgcolor="#fef4d9" OnLoad="swapPic()"> <center> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var ra

  • js鼠标点击图片切换效果实现代码

    js鼠标点击图片切换效果实现代码

    本文实例讲述了js鼠标点击图片切换效果实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:

  • js实现点击图片将图片地址复制到粘贴板的方法

    本文实例讲述了js实现点击图片将图片地址复制到粘贴板的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • js鼠标点击图片切换效果代码分享

    js鼠标点击图片切换效果代码分享

    本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图:                                      -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea

  • JS实现点击按钮自动增加一个单元格的方法

    本文实例讲述了JS实现点击按钮自动增加一个单元格的方法.分享给大家供大家参考.具体分析如下: 这是一个网页在线自助生成表格的特效代码. 核心功能代码是JS实现,点击网页中的添加按钮,网页中自动增加一个单元格 复制代码 代码如下: <HTML> <HEAD> <TITLE>js动态生成表格</TITLE> <META content="text/html; charset=hz-gb-2312" http-equiv=Content-

  • js实现点击图片在屏幕中间弹出放大效果

    js实现点击图片在屏幕中间弹出放大效果 效果图 点击图片后 关键代码 html <div> <img height="100" width="100" src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg" class="pic"/> <img height="100" wid

  • 基于JS实现点击图片在弹出层显示大图效果

    基于JS实现点击图片在弹出层显示大图效果

    Javascript是个好东西. Jquery是基于这个好东西的一个强大的库. 今天要实现的功能是基于这两个玩意儿的. 点击图片,在弹出层显示原图. 大概效果是这样的: 上代码: 先是html部分: <div style="text-align:center;margin-top:200px;"> <img src="https://guanchao.site/uploads/atricle/5db3a72e49efd.jpeg" alt=&quo

随机推荐