HTML学习笔记之一（input文件选择框的封装）

最新推荐文章于 2024-04-30 17:59:49 发布
最新推荐文章于 2024-04-30 17:59:49 发布
阅读量2.8k 收藏
点赞数 1
分类专栏： HTML/XML 文章标签： html file
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wujiangwei567/article/details/46334633
版权
本文介绍了两种HTML中input文件选择框的封装方法：一是通过透明隐藏实现，二是利用js调用来覆盖隐藏。提供了实现自定义按钮样式的方案。
摘要由CSDN通过智能技术生成

方式一：直接透明隐藏


	        .file_button_container,.file_button_container input {background: transparent url(./img/BT5AB.png) left top no-repeat;height: 47px;width: 263px;}

	       .file_button_container {background: transparent url(./img/BT5AB.png) left top no-repeat;}
	       .file_button_container input {opacity: 0;}



<div class="file_button_container"><input type="file" /></div>


方式二：覆盖隐藏 js调用

.styled-button {
				background-color:#25A6E1;color:#fff;font-family:'Helvetica Neue',sans-serif;
				font-size:14px;	line-height:30px;border-radius:20px;-webkit-border-radius:20px;
				-moz-border-radius:20px;border:0;width:1
最低0.47元/天 解锁文章
栁罗风尘
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flask框架学习笔记之表单基础介绍与表单提交方式
09-18
- `type=file`：允许用户选择本地文件进行上传。 - `type=radio`：创建单选按钮，同一组内的单选按钮只能选择一个。 - `type=checkbox`：创建复选框，可以多选。 表单按钮包括： - `type=submit`：提交按钮，点击后...
<input type="file" />浏览时只显示指定文件类型
数据库天地
12-21 1177
&lt;input type="file" /&gt;浏览时只显示指定文件类型 &lt;input type="file" accept="application/msword" &gt;&lt;br&gt;&lt;br&gt;accept属性列表&lt;br&gt; 1.accept="application/msexcel" 2.a
html input file 设置选择文件类型
liuting52001的专栏
04-23 1400
可以直接设置input标签的accept属性来限制上传文件的类型 <input type="file" accept="application/msword" ><br><br>accept属性列表<br>12 1.accept=”application/msexcel” 2.accept=”application/msword” 3.accept=”application/pdf” 4.accept=”application/poscript” 5.ac
HTML中input输入框（详解输入框的用法）
最新发布
百赢出品，必属精品
04-30 1万+
input>元素是HTML表单中最常见的元素之一，用于收集用户的输入数据。它可以包含多种类型的输入，如文本、密码、数字等。通过指定不同的type属性，可以定义不同类型的输入字段。类型（type）属性定义输入字段的类型，如文本框、密码框、单选按钮、复选框等。常见类型包括textpasswordradiocheckboxfile等。名称（name）属性用于标识输入字段的名称，以便在表单提交时能够将数据传输到服务器。对于单选按钮和复选框，相同名称的一组按钮被视为一个组，只能选择其中的一个或多个。
原生input实现上传文件以及文件夹
weixin_42536961的博客
07-22 6954
原生input实现上传文件以及文件夹
html 选择文件框代码怎么写,表单文件选择框样式自定义示例
weixin_35671843的博客
06-03 1451
复制代码代码如下:表单文件选择框样式body{font-family:Arial,Verdana,sans-serif; margin:100px;}.uploader{position:relative;display:inline-block;overflow:hidden;cursor:default;padding:0;margin:10px 0px;-moz-box-shadow:0px...
js使用input上传文件夹、拖拽上传文件夹并将文件夹结构展示为树形结构
weixin_45855469的博客
03-14 3941
左侧区域支持选择一个系统中的文件夹，或者将文件夹拖拽到这个区域进行上传，右侧区域可以将文件夹的结构展示为树形结构。
struts 学习笔记
07-05
Struts是一个开源的JavaEE框架，它主要用于构建基于MVC（Model-View-Controller）设计模式的Web应用程序。Struts的出现旨在简化使用Servlets和JSP开发可扩展且易于维护的Web应用的过程。框架的核心是ActionServlet，...
Python学习笔记纯干货新手入门必备
05-16
这篇学习笔记旨在为初学者提供一条清晰的学习路径，从环境搭建到实际编程，涵盖了Python的基础知识和核心概念。 1. **Python环境搭建**： - Python简介：Python是一种解释型、面向对象、动态数据类型的高级程序...
2022年Java学习笔记-Java课程配套案例.rar
12-19
这份"2022年Java学习笔记-Java课程配套案例.rar"压缩包文件显然是为了帮助学习者深入理解Java编程，通过实践案例来巩固理论知识。下面将详细探讨Java语言的一些核心知识点，并结合压缩包中的案例进行说明。 1. **...
html5微信手机端图片上传裁剪代码.zip
09-27
HTML5提供了`<input type="file">`标签来让用户选择本地文件，通过`accept`属性可以限制用户只能选择图片文件。同时，HTML5的`<canvas>`元素则用于在前端进行图片的显示和处理，包括裁剪操作。 其次，`js`文件夹很...
input选择保存的文件夹路径
CSDN_Hss的博客
07-25 1万+
input添加这两个属性directory=""、nwdirectory="" <input type="file" hidden directory="" nwdirectory="" ref={ref => {this.srcFolder = ref;}} onChange={(e) => {this.changeFolder(e);}} /&gt...
<input>type='file' 标签选取文件/文件夹
热门推荐
小博天蝎的博客
08-18 4万+
一般网页上传文件大家都会用到这个标签<input type='file' id='file_input'/>我们可以通过这个标签选取文件，使用js进行文件上传等操作，同时，该标签同时可以选取多个文件<input type="file" id='file_input' multiple="multiple" />但有些时候，进行其他操作的时候，用户需要获得文件夹路径，那么这种写法可以用该标签选取文件夹
前端如何直接上传文件夹
xinTianou123的博客
10-22 1541
我们经常看到一些网站支持直接选择整个文件夹上传，例如：宝塔面板、cloudflare托管、对象存储网站等等需要模拟文件路径存储文件的场景。那是怎么实现的呢？
＜input type=“file“＞“批量上传”和“选择文件夹上传”
wei1273356078的博客
05-28 1060
直接进入正题 one、多文件批量上传 <input id="upload_file" multiple="multiple" type="file" /> two、选择文件夹上传（不需管文件夹里面有多少层目录） <input id="upload_folder" type="file" webkitdirectory directory /> ...
HTML5文件操作
ddd2501的博客
11-17 1657
每天学一点知识
input 选取文件夹及多个文件 识别内部文件
cao_he_fei的博客
11-24 7984
input 选取文件夹 input 文件的选取 <input type="file" class="upfile" multiple="multiple" /> 可以选取多个文件 <input type="file" class="upfile" webkitdirectory /> 可以选择一个文件夹 拾取内部文件 change 事件 $fileInput.off().o
HTML 常用选择框
wangfei933的博客
06-04 2万+
常用类型 输入框 type="text" 员工姓名:<input type="text" />
vue封装input file，多文件上传组件
weixin_38890103的博客
09-26 2620
效果预览图 定义组件vue组件，props接收[“uploadID”, “number”, “file”, “operation”],上传图片的id,图片数量，文件url,文件操作。 //上传一张图片 <UploadFile :uploadID="produploadID" :number="1" :operation="operati...
Flask笔记.docx
04-26
Flask详细学习笔记，适合查阅

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值