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图表动画插件Highcharts Examples
Apr 16 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
简单的js计算器实现
Oct 26 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
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框架排名
2013/07/04 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
Python装饰器使用示例及实际应用例子
2015/03/06 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
python如何制作缩略图
2019/04/30 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
Python使用python-docx读写word文档
2019/08/26 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
django正续或者倒序查库实例
2020/05/19 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
医德医风演讲稿
2014/05/20 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
入党介绍人意见范文
2015/06/01 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
Go语言实现Snowflake雪花算法
2021/06/08 Golang
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android