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 3种归并操作的实例代码
Oct 30 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
JS+Canvas实现五子棋游戏
Aug 26 Javascript
vue前端工程的搭建
Mar 31 Vue.js
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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
javascript 学习笔记(onchange等)
2010/11/14 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
Python中的闭包实例详解
2014/08/29 Python
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
pygame实现打字游戏
2021/02/19 Python
python 实现简单的FTP程序
2019/12/27 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
python属于跨平台语言码
2020/06/09 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python