input file 中，点击第一个上传按钮之后再显示第二个

最新推荐文章于 2020-11-04 12:13:31 发布
最新推荐文章于 2020-11-04 12:13:31 发布
阅读量698 收藏
点赞数
分类专栏： js 表单验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37796017/article/details/81077417
版权
第二和第三按钮的样式原本是none的，点击第一个按钮，改变样式，使其显示，第二个按钮出来，点第二个按钮，第三个出来，以此类推。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上传file</title>
<script>
function btn_block(btn_id){
    document.getElementById(btn_id).style.display="block";
}
</script>
</head>

<body>
    <input type="file" id="btn1" onclick="btn_block('btn2');" />
    <input type="file" id="btn2" onclick="btn_block('btn3');" style="display:none;" />
    <input type="file" id="btn3" style="display:none;" />
</body>
</html>
周先森爱编程丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
动态添加控件,每点击一次就会增加一个按钮.C#源代码
12-12
动态添加控件,每点击一次就会增加一个按钮.C#源代码 VS2008
input标签基本使用-单选框、多选框、文件上传
weixin_72431184的博客
05-16 4458
input标签基本使用-单选框、多选框、文件上传
前端css+js实现自定义上传文件/图片按钮，并显示已选文件/图片名称
遇见小美好
07-23 5302
默认的文件上传按钮样式（如下图）确实不太好看，想展现得美观一些就自己写一个样式吧。 下面我们做一个自定义的上传按钮效果，上传后把已上传文件/图片名称也显示出来。 实现思路也很简单： 1、先把原元素隐藏起来，自己写一个好看的按钮 2、点击自定义按钮时触发原元素点击事件达到选择文件上传的效果（等同于触发了原input元素 ） 最终效果如下图： 一、html部分代码： <div> ...
input type=file 同一个文件做两次上传操作，第二次无效解决方法
你好，欢迎光临！
11-04 6991
问题 使用input[type=file] 实现文件上传功能，通过onchange事件触发js代码，这个时候第一次上传是完全没问题的，当你第二次上传文件时，如果是不同于上一次上传文件的话是可以正常上传的，不过如果你选择的还是上一个文件，也就是两次上传的文件重复了，那么就会上传失败。 原因 input是通过onchange事件来触发js代码的，由于两次文件是重复的，所以这个时候onchange事件是没有触发到的。 最佳解决方案 读取文件后，记得把input的value重新设置为空即e.target.value
Hadoop学习全程记录-在Eclipse中运行第一个MapReduce程序.docx
06-02
在本文中，我们将深入探讨如何在Eclipse环境中编写并运行你的第一个MapReduce程序，这是一个针对Hadoop初学者的教程。Hadoop是一个开源框架，用于处理和存储大量数据，而MapReduce是Hadoop的核心计算模型，它将...
html5 svg点击上传按钮进度条交互动画特效.zip
最新发布
09-26
本资源提供的"html5 svg点击上传按钮进度条交互动画特效.zip"包含了一个利用HTML5、SVG以及jQuery实现的上传按钮与进度条的动态效果。这个特效代码不仅能够为用户提供一个直观的上传进度指示，还能通过动画提升用户...
第2章-matlab程序设计完整.pptx
11-13
M 文件可以使用任何文本编辑器创建和编辑，但MATLAB 提供了一个专门的文本编辑器（M-File Editor），可以方便地创建和编辑 M 文件。有三种方式创建新的 M 文件： 1. 菜单操作：从 MATLAB 主窗口的 File 菜单中选择 ...
第3章-matlab程序设计完整.pptx
11-14
按钮操作是单击MATLAB主窗口工具栏上的Open File命令按钮，再从弹出的对话框中选择所需打开的M文件。 二、程序的暂停和终止 程序的暂停可以用pause函数，其调用标准为pause(延迟秒数)。pause函数可以使程序暂停...
MATLAB语言讲义第04章MATLAB程序设计共50页
11-25
在MATLAB程序设计中，第四章通常会深入探讨如何有效地编写和控制程序流程，提高代码效率与可读性。这50页的讲义可能涵盖了以下几个核心知识点： 1. **函数（Functions）**：MATLAB中的函数是代码组织的基本单元，...
onclick事件触发 input type=“file” 上传文件
热门推荐
yanqux的专栏
02-17 3万+
添加按钮： 　　   script type="text/javascript">  function openBrowse(){  　　var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false;  　　if(ie){  　　　　document.getElementByI
复选框/单选按钮/input file上传按钮的美化
ahukmq23090的博客
03-09 137
1.复选框第一种:代码写的对勾 <style type="text/css"> .ccc{ position:relative; } .ccc input[type=checkbox] {visibility: hidden; position: absolute; top: 21px;left: 18px;} .ccc label...
vue elementui el-upload组件 input type=file坑重新选择同一文件时不再显示
weixin_34176694的博客
09-26 6039
2019独角兽企业重金招聘Python工程师标准>>> ...
一个按钮完成前台上传文件操作
Mr Mirror的博客
08-21 1万+
我们都知道，前台选择文件，只能通过input的file类型的文件选择框操作。但有时却为了界面的美观，要求用按钮来完成。 第一步、隐藏文件选择框 第二步、设置按钮事件onclick，触发文件选择框事件           第三步、选择文件后自动上传，触发文件选择时事件onchange 第四步，使用插件上传，插件有很多，大家可以网上找，我这边用的是jquery.form.js插件（ht
图片上传时input file change事件多次触发解决
杨前露的博客
11-02 4355
http://blog.csdn.net/u011337558/article/details/49640427
上传文件——设置单个或多个文件上传及上传一次后再次点击上传无效
小白师兄
03-01 4807
在上传文件时可以根据需要选择一个或者多个文件进行上传上传单个文件：&lt;input type="file" id="file" value="上传图片" onchange="uploadImage(this)" style="position:relative;left: -141px;height: 110px;opacity: 0"/&gt;上传多个文件：   
python实现创建两个分页，第一个分页显示三个按钮，按钮一：点击时会弹出文本内容，按钮二点击会有弹窗提示，第三个按钮点击时文本内容弹窗。界面有一个显示输入窗口，第二个页面显示图片
06-02
好的，下面是一个基于 Python tkinter 模块的实现方案： ```python import tkinter as tk # 创建主窗口 root = tk.Tk() root.title("分页") # 创建分页1 page1 = tk.Frame(root) # 创建按钮1，弹出文本内容 def show_text(): tk.messagebox.showinfo("提示", "这是文本内容") button1 = tk.Button(page1, text="按钮1", command=show_text) button1.pack(side="left") # 创建按钮2，弹出输入窗口 def show_input(): input_value = tk.simpledialog.askstring("提示", "请输入文本内容") if input_value: tk.messagebox.showinfo("提示", f"你输入的内容是：{input_value}") button2 = tk.Button(page1, text="按钮2", command=show_input) button2.pack(side="left") # 创建按钮3，弹出文本内容 def show_text2(): tk.messagebox.showinfo("提示", "这是第二个文本内容") button3 = tk.Button(page1, text="按钮3", command=show_text2) button3.pack(side="left") # 创建分页2，显示图片 page2 = tk.Frame(root) image = tk.PhotoImage(file="your_image_path") label = tk.Label(page2, image=image) label.pack() # 添加分页到主窗口 root.add(page1, text="分页1") root.add(page2, text="分页2") # 进入主循环 root.mainloop() ``` 这个代码中，我们首先创建了一个主窗口，并设置标题为“分页”。然后，我们创建了两个分页，分别对应两个内容： - page1：第一个分页，包含三个按钮和一个输入窗口 - page2：第二个分页，包含一张图片 在 page1 中，我们创建了三个按钮，分别对应三种不同的弹窗内容。其中，按钮1和按钮3的弹窗内容是固定的文本，可以直接调用 `showinfo()` 方法弹出；按钮2需要弹出输入窗口，可以调用 `askstring()` 方法获取用户输入的内容，并根据内容做相应处理。 在 page2 中，我们创建了一个 `PhotoImage` 对象，用于显示图片。然后，我们将 `PhotoImage` 对象添加到一个 `Label` 控件中，并将这个控件添加到 page2 分页中。 最后，我们将两个分页添加到主窗口中，并进入 `mainloop()` 循环，等待用户交互。 这是一个基础的实现方案，你可以根据自己的需求进行修改和扩展。如果你有问题，可以随时问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值