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小技巧
Jul 21 Javascript
xml转json的js代码
Aug 28 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 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 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
使用PHP获取网络文件的实现代码
2010/01/01 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
js replace()去除代码中空格的实例
2017/02/14 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
Python pickle模块实现对象序列化
2019/11/22 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
Linux的主要特性
2016/09/03 面试题
英文简历自荐信范文
2013/12/11 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
市场营销策划方案
2014/06/11 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
2015年教师节主持词
2015/07/03 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python