JS 獲取文件后綴，判斷文件類型(比如是否為圖片格式)
更新時(shí)間：2020年05月09日 21:45:29 投稿：mdxy-dxy
這篇文章主要介紹了JS 獲取文件后綴，判斷文件類型(比如是否為圖片格式),需要的朋友可以參考下
1、獲取文件后綴
有時(shí)候我們需要通過(guò)文件名或者路徑，得到該文件的后綴名（擴(kuò)展名），可以通過(guò)如下方式進(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)文章
Bootstrap實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)(親測(cè)可用)
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
JavaScript實(shí)現(xiàn)LRU算法的示例詳解
不知道屏幕前的朋友們，有沒(méi)有和我一樣，覺(jué)得LRU算法原理很容易理解，實(shí)現(xiàn)起來(lái)卻很復(fù)雜。所以本文就為大家整理了一下實(shí)現(xiàn)的示例代碼，需要的可以參考一下2023-04-04
echart簡(jiǎn)介_(kāi)動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了echart簡(jiǎn)介，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
一個(gè)用js實(shí)現(xiàn)過(guò)濾重復(fù)字符的函數(shù)
一個(gè)用js實(shí)現(xiàn)過(guò)濾重復(fù)字符的函數(shù)...2007-08-08
JS實(shí)現(xiàn)移動(dòng)端可折疊導(dǎo)航菜單（現(xiàn)代都市風(fēng)）
這篇文章主要介紹了JS如何實(shí)現(xiàn)移動(dòng)端可折疊導(dǎo)航菜單，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單掃雷，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
javascript 設(shè)計(jì)模式之組合模式原理與應(yīng)用詳解
這篇文章主要介紹了javascript 設(shè)計(jì)模式之組合模式原理與應(yīng)用,結(jié)合實(shí)例形式分析了javascript組合模式基本概念、原理、應(yīng)用場(chǎng)景及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
asp.net下利用js實(shí)現(xiàn)返回上一頁(yè)的實(shí)現(xiàn)方法小集
其實(shí)要實(shí)現(xiàn)這個(gè)功能主要還是要用到j(luò)avascript2009-11-11
JavaScript實(shí)現(xiàn)煙花和福字特效
這篇文章主要介紹了利用JavaScript實(shí)現(xiàn)放煙花特效和用字符“$”繪制“?！弊?，文中的示例代碼簡(jiǎn)潔易懂，感興趣的小伙伴可以學(xué)習(xí)一下2022-01-01
使用getBoundingClientRect方法實(shí)現(xiàn)簡(jiǎn)潔的sticky組件的方法
本文介紹這種組件的實(shí)現(xiàn)思路，并提供一個(gè)同時(shí)支持將sticky元素固定在頂部或底部的具體實(shí)現(xiàn)，由于這種組件在網(wǎng)站中非常常見(jiàn)，所以有必要掌握它的實(shí)現(xiàn)方式，以便在有需要的時(shí)候基于它的思路寫(xiě)出功能更多的組件出來(lái)2016-03-03