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 html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
Vue组件化开发思考
Feb 02 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 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
星际争霸任务指南——人族
2020/03/04 星际争霸
提取HTML标签
2006/10/09 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
JavaScript中URL编码函数代码
2011/01/11 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
python中list循环语句用法实例
2014/11/10 Python
Python实现二叉搜索树
2016/02/03 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
七年级英语教学反思
2014/01/15 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
洗发水广告词
2014/03/13 职场文书
迎新晚会主持词
2014/03/24 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL