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 常用校验函数
Mar 26 Javascript
javascript 浏览器检测代码精简版
Mar 04 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
JS判断、校验MAC地址的2个实例
May 05 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
原生js+canvas实现验证码
Nov 29 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
substr()函数中文版
2006/10/09 PHP
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
Sublime Text 3常用插件及安装方法
2015/12/16 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python构造函数及解构函数介绍
2015/02/26 Python
介绍Python中内置的itertools模块
2015/04/29 Python
详解Python中的type()方法的使用
2015/05/21 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
策划创业计划书
2014/02/06 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
钳工实训报告总结
2014/11/04 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang