input file 文件上传标签的样式美化
2024-08-25 01:46:06
input file 文件上传标签的样式美化
将<input type="file">的透明度设置为0:
<input type="file" class="filess" style="opacity: 0"/>
然后另外创建一个文本输入框和一个点击按钮:
<input type="text" style="width: 350px" class="filetext"/>
<button class="xiugaibtn">修改</button>
文本输入框和按钮的样式随需要设置好。
然后用js将按钮点击事件与文件上传中的按钮绑定:
$(".xiugaibtn").click(function () {
$(".filess").click();
});
将文本输入框与文件上传中文本栏绑定,当文件位置显示改变后,将路径写入文本输入框中。
效果图:
图一:点击打开文件地址选择框
图二:文件路径显示
最新文章
- CAS学习笔记(二)—— cas server端的login-webflow详细流程
- 网站appache的ab命令压力测试性能
- eclipse下启动tomcat出现Setting property &#39;source&#39; to &#39;org.eclipse.jst.jee.server: &#39;错误的解决办法
- p4 是否能自动merge
- xshell下载文件到本地/上传文件到服务器
- 关于Servlet中的HttpServletRequest和HttpServletResponse
- InnoDB 引擎独立表空间 innodb_file_per_table
- linux 常用端口列表
- 改进uboot,添加自定义快捷菜单
- Git CMD - show: Show various types of objects
- 图片上传并显示(兼容ie),图片大小判断
- js键盘控制div移动,解决停顿问题
- “玲珑杯”郑州轻工业学院第八届ACM程序设计大赛暨河南高校邀请赛-正式赛(总结)
- iOS 5 故事板入门(3)
- Guacamole 介绍
- 201521123035《Java程序设计》第六周学习总结
- POJ1222熄灯问题
- 从输入一个URL到页面完全显示发生了什么?
- FileStream类操作文件
- HOWTO For iSCSI-SCST &;&; Gentoo HOWTO For iSCSI-SCST
热门文章
- CentOS 7下NFS Server作rootfs时的兼容性问题
- pytest.2.运行多个文件
- 【springboot】之 解析@EnableWebMvc 、WebMvcConfigurationSupport和WebMvcConfigurationAdapter
- Sublime Text 3中文乱码问题解决(最新)
- 廖雪峰Java5集合-3Map-1使用Map
- folly无锁队列,尝试添加新的函数(续)
- angular的subscribe
- [UE4]如何编译部署独立专用服务端(Standalone Dedicated Server)
- Android知识点textview加横线的属性
- .net core从依赖注入容器获取对象