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 相关文章推荐
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
JavaScript实现优先级队列
Dec 06 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
B2K与车机的中波PK
2021/03/02 无线电
[转帖]PHP世纪万年历
2006/12/06 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
php面向对象值单例模式
2016/05/03 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
python用match()函数爬数据方法详解
2019/07/23 Python
Pytorch中.new()的作用详解
2020/02/18 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
综合办公室主任职责
2013/12/16 职场文书
项目副经理岗位职责
2013/12/30 职场文书
小班秋游活动方案
2014/02/22 职场文书