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模拟实现Array的sort方法
Dec 11 Javascript
JavaScript实现动态增加文件域表单
Feb 12 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 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程序占用多少内存(memory_get_usage)
2012/09/23 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
React实现全选功能
2020/08/25 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
python学习之matplotlib绘制散点图实例
2017/12/09 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
平面设计师工作职责范文
2013/12/03 职场文书
店长助理岗位职责
2013/12/13 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
廉政承诺书2015
2015/04/28 职场文书
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers