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下用eval生成JSON对象
Sep 17 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
javascript实现yield的方法
Nov 06 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
js闭包学习心得总结
Apr 17 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
javascript实现获取中文汉字拼音首字母
May 19 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
php上传、管理照片示例
2006/10/09 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JS Array对象入门分析
2008/10/30 Javascript
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
Python求导数的方法
2015/05/09 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
会计主管岗位职责
2014/01/03 职场文书
劲霸男装广告词
2014/03/21 职场文书
《分一分》教学反思
2014/04/13 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
Go Plugins插件的实现方式
2021/08/07 Golang