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提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
微信小程序按钮点击跳转页面详解
May 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
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
js快速排序的实现代码
2013/12/08 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
浅谈js中的闭包
2015/03/16 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
pyqt5自定义信号实例解析
2018/01/31 Python
Python安装selenium包详细过程
2019/07/23 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
python简单的三元一次方程求解实例
2020/04/02 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
技校生自我鉴定
2013/12/08 职场文书
电子商务专业自我鉴定
2013/12/18 职场文书
公益活动策划方案
2014/01/09 职场文书
领导干部培训感言
2014/01/23 职场文书
学习演讲稿范文
2014/05/10 职场文书
入团介绍人意见范文
2015/06/04 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android