js獲取input上傳文件的文件名和擴展名的方法
- 2019 年 11 月 13 日
- 筆記
使用 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://www.w3h5.com/post/89.html
