获取input type=file的文件名及input type=file获取文件名的浏览器,设置input type=file样式
浏览器 设置 获取 File type 样式 input 文件名
2023-09-11 14:19:17 时间
转自:
https://blog.csdn.net/lyn1772671980/article/details/80054474
获取input type=file的文件名方法:
let filePath = $("input[type = 'file']").val(); //获取路径
let urlArr = filePath.split("\\"); //以反斜杠'\'截取文件名为数组
let fileName = urlArr[urlArr.length-1]; //获取文件名
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="js/jquery-1.8.3.min.js"></script>
<style>
.fileIpt {
width: 423px;
height: 30px;
}
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.label-text[for = "inputDataBackup1"] {
color: #0e0e0e;
padding: 5px 20px 6px 20px;
margin-bottom: 0px;
font-weight: 500;
background: #2fc8f6;
border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
-moz-border-radius: 3px 0px 0px 3px;
font-size: 14px;
vertical-align: middle;
text-align: center;
}
#inputDataBackup1 {
width: 268px;
height: 30px;
background: transparent;
position: relative;
display: inline-block;
margin-left: -6px;
padding: 1px 0px 0px 0px;
color: #57D1F7;
text-align: center;
vertical-align: middle;
border: 2px solid #2fc8f6;
border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.selectFile {
position: absolute;
left: 0;
top: -1px;
z-index: 3;
height: 30px;
width: 268px;
opacity: 0;
}
.errTip {
position: absolute;
top: 20px;
left: 50%;
margin-left: -90px;
color: red;
font-size: 12px;
}
.fileName {
width: 210px;
height: 30px;
position: absolute;
left: 0;
top: -2px;
z-index: 1;
color: #000;
text-align: center;
background-color: transparent;
border-color: transparent;
overflow: hidden;
text-overflow: ellipsis;
}
.path {
width: 55px;
height: 30px;
background-color: #2fc8f6;
display: inline-block;
position: absolute;
top: -2px;
right: 0;
z-index: -1;
text-align: center;
vertical-align: middle;
border-radius: 0px 3px 3px 0px;
-webkit-border-radius: 0px 3px 3px 0px;
-moz-border-radius: 0px 3px 3px 0px;
}
.pathText {
display: inline-block;
font-size: 30px;
line-height: 30px;
color: #fff;
letter-spacing: 3px;
margin-top: -10px;
}
</style>
</head>
<body>
<div class="fileIpt">
<label class="label-text" for="inputDataBackup1">选择文件</label>
<div id="inputDataBackup1" class="input-selectStyle">
<input class="selectFile" type="file" title="未选择任何文件">
<p class="errTip"></p><input class="fileName" readonly="readonly">
<div class="path">
<span class="pathText">...</span>
</div>
</div>
</div>
<script type="text/javascript">
$(".selectFile").on("change",function(){
let filePath = $(this).val();
let urlArr = filePath.split("\\");
let fileName = urlArr[urlArr.length-1];
$(".fileName").val(fileName);
$(this).attr("title",fileName);
if(fileName == "") {
$(".errTip").html("请选择上传文件");
}else{
$(".errTip").html("");
}
})
</script>
</body>
</html>
相关文章
- destoon系统开发-最新利用浏览器的cookie 做历史浏览记录
- 第三百二十八节,web爬虫讲解2—urllib库爬虫—状态吗—异常处理—浏览器伪装技术、设置用户代理
- VS2010Web默认的浏览器设置和VS里调试JavaScript代码的设置
- doctype声明、浏览器的标准、怪异等模式
- Selenium WebDriver使用IE浏览器 属性设置
- 设置IE浏览器的默认下载路径
- SAP UI5是如何从浏览器读取语言设置并按照优先级排序的
- 使用 ABAP 事物码 SAT 对从浏览器打开的 SAP应用进行性能监控和测量
- 一个好用的便利设置浏览器代理的Chrome扩展应用
- webstorm 怎样设置默认浏览器为Google谷歌浏览器?怎样在Google谷歌浏览器中打开网页?
- CodeIgniter实现config控制的多语言,可根据浏览器语言自动转换
- Android 11.0 设置默认浏览器安装一款浏览器默认浏览器无效的解决方案
- 浏览器执行Python脚本
- xpath-helper: 谷歌浏览器安装xpath helper 插件
- 浏览器内核入门
- 为什么IE浏览器总是创建Links文件夹
- Fiddler及浏览器开发者工具进行弱网测试
- WebAssembly,可以作为任何编程语言的编译目标,使应用程序可以运行在浏览器或其它代理中——浏览器里运行其他语言的程序?
- selenium.获取浏览器大小、设置浏览器位置、最大化浏览器
- linux安装selenium、chromedriver、Chrome浏览器、BrowserMob Proxy(代理)爬虫爬站环境安装及测试实例
- 谷歌浏览器的源码分析(33)