js实现点击图片自动提交action的简单方法

作者:jingxian 时间:2024-04-29 14:07:21 

利用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
0
投稿

猜你喜欢

  • OpenCV实现图片亮度增强或减弱

    2022-09-16 00:15:04
  • python excel多行合并的方法

    2021-09-25 22:36:29
  • MySQL定时任务(EVENT事件)如何配置详解

    2024-01-19 08:04:12
  • Python pygame项目实战英雄动画特效实现

    2021-02-22 21:07:50
  • Python+Plotly绘制精美的数据分析图

    2022-01-09 13:02:05
  • MySQL安装配置方法教程

    2024-01-21 23:35:30
  • Python编程使用matplotlib绘制动态圆锥曲线示例

    2021-08-30 03:38:18
  • PyTorch基础之torch.nn.Conv2d中自定义权重问题

    2023-10-13 05:16:31
  • 浏览器用户体验:Firefox初体验 VS The world

    2008-08-02 11:58:00
  • Python函数的迭代器与生成器的示例代码

    2022-09-14 01:29:58
  • anaconda python3.8安装后降级

    2021-09-12 05:28:51
  • php中关于hook钩子函数底层理解

    2023-06-12 06:49:55
  • python删除列表内容

    2023-05-23 02:47:49
  • golang time包的用法详解

    2024-04-25 13:19:19
  • Pandas实现DataFrame的简单运算、统计与排序

    2022-03-29 02:09:54
  • 一文深入了解Python中的继承知识点

    2023-01-16 19:57:16
  • javascript闭包的秘密

    2008-09-28 20:39:00
  • SQL Server 在Management Studio中使用Web浏览器

    2024-01-24 12:48:20
  • Python开发自定义Web框架的示例详解

    2023-05-23 19:43:43
  • JS阻止事件冒泡的方法详解

    2023-09-10 08:57:36
  • asp之家 网络编程 m.aspxhome.com