bootstrap 好看的上传组件
2024-10-07 17:56:38
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<form class="form-inline" action="">
<div class="container">
<div class="row">
<div class="form-group">
<div class="col-sm-4 control-label">选择文件</div>
<div class="col-sm-8">
<div class="input-group">
<input id='location' class="form-control" onclick="$('#i-file').click();">
<label class="input-group-btn">
<input type="button" id="i-check" value="浏览文件" class="btn btn-primary"
onclick="$('#i-file').click();">
</label>
</div>
</div>
<input type="file" name="file" id='i-file' accept=".xls, .xlsx"
onchange="$('#location').val($('#i-file').val());" style="display: none">
</div>
</div>
</div>
</form>
</body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>
效果图如下：
最新文章
- 修改 jquery.validate.js 支持非form标签
- bzoj2342还是马拉车
- MVC利用MvcHtmlString在后台生成HTML
- LeetCode 26 Remove Duplicates from Sorted Array
- Linux 命令——grep | 正则表达式
- C#链接阿里云OCS
- Linux中获取当前程序的绝对路径
- iOS开发-VFL(Visual format language)和Autolayout
- mybatis中的mapper.xml
- 能在你离开时照顾你的宠物的3D打印机器人
- B题（覆盖问题）
- Akamai CDN
- CSS 静态进度条效果
- logstash filter 处理json
- Java课程2019年3月开学测试
- mysql 循环、游标
- Spring Boot引入Oracle Jar
- 深度学习原理与框架-递归神经网络-时间序列预测(代码) 1.csv.reader(进行csv文件的读取) 2.X.tolist(将数据转换为列表类型)
- 基于windows server 2012 的微软桌面虚拟化实战教程
- listener does not currently know of 。。。。