使用 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><br>';
//获取上传文件的扩展名
var filevalue = myfile.value;
var index = filevalue.lastIndexOf('.');
div.innerHTML= div.innerHTML+'<span style="color:#FF0000;">扩展名:' + filevalue.substring(index) + '</span>';
}
}
</script>
测试效果如下图:
未上传任何文件:
已选择文件:
2. 使用 jQuery 获取:
CSS 和 HTML 部分代码没变,js 代码如下:我这次使用的是监听 input 的 change 事件,button 按钮可以删掉。
<script>
$(function () {
var file = "";
var fileName = "";
var fileExt = "";
$("#myfile").change(function () {
//获取文件的value值
file = $("#myfile").val()
//获取文件名+扩展名
fileName = file.split("\\").pop();
//获取文件名
fileName = fileName.substring(0, fileName.lastIndexOf("."));
//获取文件的扩展名
fileExt = file.substr(file.lastIndexOf("."));
//清空DIV容器内容
$("#div").html("");
$("#div").append("<p style='color: red'>文件名:"+fileName+"</p>");
$("#div").append("<p style='color: red'>扩展名"+fileExt+"</p>");
})
});
</script>
效果如下图:
声明:本文由w3h5原创,转载请注明出处:《js获取input上传文件的文件名和扩展名的方法》 https://cloud.tencent.com/developer/article/1538508