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


Posted in Javascript onOctober 16, 2016

利用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的简单方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
前台js调用后台方法示例
Dec 02 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
javascript包装对象实例分析
Mar 27 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
React中的refs的使用教程
Feb 13 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 #Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 #Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 #Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 #Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 #Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 #Javascript
JS实现禁止鼠标右键的功能
Oct 15 #Javascript
You might like
php中文字母数字验证码实现代码
2008/04/25 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
Js中sort()方法的用法
2006/11/04 Javascript
JS Array对象入门分析
2008/10/30 Javascript
js window.event对象详尽解析
2009/02/17 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
JavaScript window.location对象
2014/11/14 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
python实现简单图书管理系统
2019/11/22 Python
Python数组并集交集补集代码实例
2020/02/18 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
大学生期末自我鉴定
2014/02/01 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
售后客服工作职责
2014/06/16 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
埃及王子观后感
2015/06/16 职场文书
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android