如何使用js获取扩展名详解

目录
  • 一、使用正则表达式
  • 二、使用String中的split方法
  • 三、使用String的lastIndexOf方法
  • 四、附获取文件扩展名的另两种方法
  • 总结

一、使用正则表达式

function getFileExtension1(filename) {
  return /[.]/.exec(filename) ? /[^.]+$/.exec(filename)[0] : undefined
}

这里的/[.]/.exec(filename)是用来判断.是否存在,如果不存在的话,其值为null,/[^.]+$/.exec(filename)[0]拿到从.开始匹配的字符串,也就是扩展名。如果不存在则返回undefined。

二、使用String中的split方法

function getFileExtension(filename) {
  return filename.split(".").pop()
}

三、使用String的lastIndexOf方法

function getFileExtension(filename) {
  return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2)
}

解释:首先filename.slice()方法是用来切割字符串的,所以我们只需要获取的.的下一位坐标即可,此时我们可以使用filename.lastIndexOf()来获取最后一位.所在的下标。

我们需要考虑多种情况,

一种:如果filename.lastIndexOf()大于0,此时我们直接获取下一位的坐标即可,以下一位为起始进行切割。

二种:如果filename.lastIndexOf为-1,则表示不存在.,此时我们应该将其设置为一个很大的数,当从一个大于字符串长度进行切割时,返回的字符串为空字符串。

三种:如果filename.lastIndexOf为0时,则也表示不存在扩展名,此时我们应该将其设置为很大的数。

filename.lastIndex(".") - 1中这里的减一,就是将0变为-1, -1变成-2。

>>> 0的解释:

console.log(12 >>> 0)    //12
console.log(1.2 >>> 0)   //1
console.log(1.8 >>> 0)   //1
console.log(-1 >>> 0)    //4294967295
console.log(-2 >>> 0)    //4294967294
console.log(0 >>> 0)     //0
如上述代码和其结果所示。
如果值为正整数时,此时结果还为原来的值
如果值为小数时,此时结果为小数向下取整所得的值。
如果值为负数时,此时结果为当前值 + 二的32次方所得的值。
如果值为0时,此时结果为0。

四、附获取文件扩展名的另两种方法

  • substring,lastIndexOf联合使用
  • split,pop联合使用

下面贴上代码:

//获取文件后缀的js代码
<script type="text/javascript">
        var strp;
    function getEx(){
        var filepath=document.getElementById('fileEx').value;
        var opt=parseInt(document.getElementById('opt').value);
        switch(opt){
            case 1:
                strp=filepath.substring(filepath.lastIndexOf(".")+1);
                break;
            case 2:
                strp=filepath.split(".").pop();
                break;
                        }
        alert(strp);
    }
    </script>

//html页面
<input type="file" id="fileEx" name="fileEx">
<select id="opt">
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<button onClick="getEx()">获取</button>

简要来说就是获取文件路径,然后使用不同的方法获取后缀名

总结

到此这篇关于如何使用js获取扩展名的文章就介绍到这了,更多相关js获取扩展名内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • js实现浏览本地文件并显示扩展名的方法

    本文实例讲述了js实现浏览本地文件并显示扩展名的方法.分享给大家供大家参考.具体如下: 这里用文件域浏览指定文件,可以显示该文件的扩展名,想想它可以用在哪里?可以用在文件上传系统上,用来判断上传的文件类型是否是合法类型,不是则不允许上传.再看看代码,不足10行,解决问题,正在学习javaScript的朋友,你也可参考参考哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-view-nav-file-ext-codes/ 具体代码如下: <

  • 如何使用js获取扩展名详解

    目录 一.使用正则表达式 二.使用String中的split方法 三.使用String的lastIndexOf方法 四.附获取文件扩展名的另两种方法 总结 一.使用正则表达式 function getFileExtension1(filename) { return /[.]/.exec(filename) ? /[^.]+$/.exec(filename)[0] : undefined } 这里的/[.]/.exec(filename)是用来判断.是否存在,如果不存在的话,其值为null,/[

  • Java8中如何通过方法引用获取属性名详解

    前言 在我们开发过程中常常有一个需求,就是要知道实体类中Getter方法对应的属性名称(Field Name),例如实体类属性到数据库字段的映射,我们常常是硬编码指定 属性名,这种硬编码有两个缺点. 1.编码效率低:因为要硬编码写属性名,很可能写错,需要非常小心,时间浪费在了不必要的检查上. 2.容易让开发人员踩坑:例如有一天发现实体类中Field Name定义的不够明确,希望换一个Field Name,那么代码所有硬编码的Field Name都要跟着变更,对于未并更的地方,是无法在编译期发现的

  • C#获取Description特性的扩展类详解

    C#中Description特性主要用于枚举和属性,方法比较简单,记录一下以便后期使用. 扩展类DescriptionExtension代码如下: using System; using System.ComponentModel; using System.Reflection; /// <summary> /// 描述特性的读取扩展类 /// </summary> public static class DescriptionExtension { /// <summar

  • wasm+js实现文件获取md5示例详解

    目录 引言 本文重点 准备工作 测试代码 纯js测试代码 wasm(go)源码 js+wasm测试代码 测试条件 测试目标 chrome (版本:103.0.5060.114) firefox (版本号:103.0.1 (64 位)) 分段计算测试代码 纯js js+wasm 测试结论 firefox chrome 最终结论 引言 在过去的几年里,wasm的话题那真是从早上聊到晚上,可以说处于异常兴奋的状态,但是几年过去了,它慢慢的被大多数人们忘记,原因比较简单——落地难 今天就wasm能给js

  • JS Attribute属性操作详解

    Attribute是属性的意思,文章仅对部分兼容IE和FF的Attribute相关的介绍. attributes:获取一个属性作为对象 getAttribute:获取某一个属性的值 setAttribute:建立一个属性,并同时给属性捆绑一个值 createAttribute:仅建立一个属性 removeAttribute:删除一个属性 getAttributeNode:获取一个节点作为对象 setAttributeNode:建立一个节点 removeAttributeNode:删除一个节点 a

  • Java Spring MVC获取请求数据详解操作

    目录 1. 获得请求参数 2. 获得基本类型参数 3. 获得POJO类型参数 4. 获得数组类型参数 5. 获得集合类型参数 6. 请求数据乱码问题 7. 参数绑定注解 @requestParam 8. 获得Restful风格的参数 9. 自定义类型转换器 1.定义转换器类实现Converter接口 2.在配置文件中声明转换器 3.在<annotation-driven>中引用转换器 10. 获得Servlet相关API 11. 获得请求头 11.1 @RequestHeader 11.2 @

  • Spring集成Web环境与SpringMVC组件的扩展使用详解

    目录 一.Spring集成Web环境(解耦) 二.SpringMVC快速入门 三.SpringMVC的执行流程 四.SpringMVC组件解析 五.SpringMVC注解解析 六.SpringMVC组件扫描的扩展 七.SpringMVC的XML配置解析之视图解析器 一.Spring集成Web环境(解耦) 实际开发中,我们通常需要编写多个Web相关的Servlet的时候,如下 package com.kang.service; import org.springframework.context.

  • js正则表达式常用函数详解(续)

    正则表达式对象的方法 1.test,返回一个 Boolean 值,它指出在被查找的字符串中是否存在模式.如果存在则返回 true,否则就返回 false. 2.exec,用正则表达式模式在字符串中运行查找,并返回包含该查找结果的一个数组. 3.compile,把正则表达式编译为内部格式,从而执行得更快. 正则表达式对象的属性 1.source,返回正则表达式模式的文本的复本.只读. 2.lastIndex,返回字符位置,它是被查找字符串中下一次成功匹配的开始位置. 3.input ($_),返回

  • JS库之Three.js 简易入门教程(详解之一)

    开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择. 博主目前也在学习three.js,发现相关资料非常稀少,甚至官方的api文档也非常粗糙,很多效果需要自己慢慢敲代码摸索.所以我写这个教程的目的一是自己总结,二是与大家分享. 本篇是系列教程的第一篇:入门篇.在这篇文章中,我将以一个简单的demo为例,阐述three.js的基本配置方法.学完这篇文章

  • SpringMVC下获取验证码实例详解

    SpringMVC下获取验证码实例详解 前言: 1.用户一开始登录的时候, 不建议出现验证码, 这一点在很多网站上已经体现的很好了, 只有当用户连续输错三次或者以上才会要求用户输入验证码. 2.记录用户输错次数最好不要使用 session 来记录, 因为 session 是跟客户端浏览器会话有关的, 如果用重启浏览器或者换新的浏览器再来登录或者试错, 就是新的回话了, 原来记录的错误次数就失效了. 建议此处采用缓存机制来实现, 简单处理就是采用 Map<用户登录id, 错误次数> 来实现, 如

随机推荐