使用 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>