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 相关文章推荐
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
json的使用小结
Jun 08 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 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
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
简单介绍Python中的round()方法
2015/05/15 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
Django中URL的参数传递的实现
2019/08/04 Python
python验证码图片处理(二值化)
2019/11/01 Python
高中军训的心得体会
2014/09/01 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
保护环境的宣传语
2015/07/13 职场文书
初中班长竞选稿
2015/11/20 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
Hive日期格式转换方法总结
2022/06/25 数据库