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 相关文章推荐
window.location.hash 属性使用说明
Mar 20 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
js验证账户名是否重复
May 26 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
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
Javascript快速排序算法详解
2014/12/03 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
jquery.validate使用时遇到的问题
2015/05/25 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
详细解析Python当中的数据类型和变量
2015/04/25 Python
Python基于select实现的socket服务器
2016/04/13 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
Python图像读写方法对比
2020/11/16 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
python自动化办公操作PPT的实现
2021/02/05 Python
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
校园歌咏比赛主持词
2014/03/18 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
学雷锋日活动总结
2015/02/06 职场文书
五一晚会主持词
2015/07/01 职场文书
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技