JS 獲取文件后綴,判斷文件類型(比如是否為圖片格式)
1、獲取文件后綴
有時(shí)候我們需要通過文件名或者路徑,得到該文件的后綴名(擴(kuò)展名),可以通過如下方式進(jìn)行截?。?br />
//文件路徑 var filePath = "file://upload/jb51.png"; //獲取最后一個(gè).的位置 var index= filePath.lastIndexOf("."); //獲取后綴 var ext = filePath.substr(index+1); //輸出結(jié)果 console.log(ext);
效果圖如下:
2、文件類型判斷
我們得到文件后綴名后,根據(jù)后綴即可判斷文件的類型(文件格式)。比如我們需要判斷一個(gè)文件是否是圖片格式,首先定義一個(gè)判斷函數(shù):
function isAssetTypeAnImage(ext) { return [ 'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff']. indexOf(ext.toLowerCase()) !== -1; }
使用時(shí)只需把后綴傳入即可判斷:
//文件路徑 var filePath = "file://upload/jb51.png"; //獲取最后一個(gè).的位置 var index= filePath.lastIndexOf("."); //獲取后綴 var ext = filePath.substr(index+1); //判斷是否是圖片 console.log("該文件是否為圖片:" + isAssetTypeAnImage(ext));
效果圖如下:
3、第三種實(shí)現(xiàn)方式,今天腳本之家小編剛get到的新技能
<script> //文件路徑 var fileName = "file://upload/jb51.png"; var Ttype=""; //后綴獲取 let suffix = ''; // 獲取類型結(jié)果 let result = ''; const flieArr = fileName.split('.'); suffix = flieArr[flieArr.length - 1]; if(suffix!=""){ suffix = suffix.toLocaleLowerCase(); // 圖片格式 const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif']; // 進(jìn)行圖片匹配 result = imglist.find(item => item === suffix); if (result) { Ttype='image'; } } console.log("該文件是否為圖片:" + Ttype); </script>
使用es6的箭頭函數(shù)
相關(guān)文章
多個(gè)jquery.datatable共存,checkbox全選異常的快速解決方法
這篇文章主要介紹了多個(gè)jquery.datatable共存,checkbox全選異常的快速解決方法。需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12bootstrap weebox 支持ajax的模態(tài)彈出框
本篇介紹的bootstrap weebox(支持ajax的模態(tài)彈出框),歷經(jīng)多次修改,目前版本已經(jīng)穩(wěn)定,整合了bootstrap的響應(yīng)式,界面簡單,功能卻無比豐富,支持ajax、圖片預(yù)覽等等2017-02-02將CKfinder整合進(jìn)CKEditor3.0的新方法
最新發(fā)布的CKFinder 1.4版 已經(jīng)提供了對CKEditor3.0的支持2010-01-01JavaScript數(shù)組方法之findIndex()的用法詳解
findIndex()方法是一個(gè)非常實(shí)用的數(shù)組方法,可以幫助我們快速查找符合某個(gè)條件的元素,本文給大家介紹JavaScript數(shù)組方法之findIndex()的用法,感謝的朋友跟隨小編一起看看吧2023-10-10Bootstrap carousel輪轉(zhuǎn)圖的使用實(shí)例詳解
圖片輪播效果在Web中常常能看到,很多人也稱之為幻燈片。這篇文章主要給大家介紹Bootstrap carousel輪轉(zhuǎn)圖的使用實(shí)例詳解,需要的朋友可以參考下2016-05-05json前后端數(shù)據(jù)交互相關(guān)代碼
本篇文章給大家分享了關(guān)于json前后端數(shù)據(jù)交互方法實(shí)現(xiàn)的相關(guān)知識點(diǎn)內(nèi)容,有興趣的讀者們可以參考學(xué)習(xí)下。2018-09-09