js获取上传文件名和扩展名
作者：microsoftvs 更新时间：2019/8/12 16:22:34 点击数：1462
js获取上传文件的文件名和扩展名
使用 js 可以获取 input 上传文件的文件名和扩展名，这里我整理一下具体方法：
1. 使用原生JS获取：
CSS代码：给 div 一个内边距，按钮设置样式。
div{
padding: 5px;
}
#mybtn {
width: 100px;
height: 30px;
font-size: 18px;
background-color: #00a0e9;
border: none;
text-align: center;
color: #FFF;
}HTML代码：写一个input file 按钮，一个 button 按钮用来触发一个事件，一个 div 容器用来放提示信息。
<div> <input type="file" name="myfile" id="myfile" value=""/> </div> <div> <button id="mybtn">点击</button> </div> <div id="div"> </div>
JS代码：点击 button 按钮时触发事件，如果未选择任何文件会返回 undefined ，如果已选择文件 则返回文件名和扩展名。
<script>
//获取一个上传文件的扩展名
var myfile = document.getElementById('myfile');
var mybtn = document.getElementById('mybtn');
var div = document.getElementById('div');
mybtn.onclick = function () {
//获取文件上传文件的文件名和扩展名
if (myfile.files[0] == undefined) {
alert('未上传任何文件！');
} else {
//获取上传文件的文件名
div.innerHTML= div.innerHTML+'<span style="color:#FF0000;">文件名：' + myfile.files[0].name + '</span>
';
//获取上传文件的扩展名
var filevalue = myfile.value;
var index = filevalue.lastIndexOf('.');
div.innerHTML= div.innerHTML+'<span style="color:#FF0000;">扩展名：' + filevalue.substring(index) + '</span>';
}
}
</script>全部源码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{
padding: 5px;
}
#mybtn {
width: 100px;
height: 30px;
font-size: 18px;
background-color: #00a0e9;
border: none;
text-align: center;
color: #FFF;
}
</style>
</head>
<body>
<div>
<input type="file" name="myfile" id="myfile" value=""/>
</div>
<div>
<button id="mybtn">点击</button>
</div>
<div id="div">
</div>
<script>
//获取一个上传文件的扩展名
var myfile = document.getElementById('myfile');
var mybtn = document.getElementById('mybtn');
var div = document.getElementById('div');
mybtn.onclick = function () {
//获取文件上传文件的文件名和扩展名
if (myfile.files[0] == undefined) {
alert('未上传任何文件！');
} else {
//获取上传文件的文件名
div.innerHTML= div.innerHTML+'<span style="color:#FF0000;">文件名：' + myfile.files[0].name + '</span><br>';
//获取上传文件的扩展名
var filevalue = myfile.value;
var index = filevalue.lastIndexOf('.');
div.innerHTML= div.innerHTML+'<span style="color:#FF0000;">扩展名：' + filevalue.substring(index) + '</span>';
}
}
</script>
</body>
</html>