JS - 获取文件后缀，判断文件类型（比如是否为图片格式）

，获取文件后缀

有时候我们需要通过文件名或者路径，得到该文件的后缀名（扩展名），可以通过如下方式进行截取：

//文件路径

var filePath = "file:///storage/emulated/0/opmark/User/Pic/hangge.png";

//获取最后一个.的位置

var index= filePath.lastIndexOf(".");

//获取后缀

var ext = filePath.substr(index+1);

//输出结果

console.log(ext);

效果图如下：

2，文件类型判断

我们得到文件后缀名后，根据后缀即可判断文件的类型（文件格式）。比如我们需要判断一个文件是否是图片格式，首先定义一个判断函数：

function isAssetTypeAnImage(ext) {

return [

'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].

indexOf(ext.toLowerCase()) !== -1;

}

使用时只需把后缀传入即可判断：

//文件路径

var filePath = "file:///storage/emulated/0/opmark/User/Pic/hangge.png";

//获取最后一个.的位置

var index= filePath.lastIndexOf(".");

//获取后缀

var ext = filePath.substr(index+1);

//判断是否是图片

console.log("该文件是否为图片：" + isAssetTypeAnImage(ext));

效果图如下：

原文链接：https://www.hangge.com/blog/cache/detail_1754.html#

TML教程

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

在本教程中，您将学习如何使用 HTML 来创建站点。

HTML 很容易学习！相信您能很快学会它！

本教程包含了数百个 HTML 实例。

使用本站的编辑器，您可以轻松实现在线修改 HTML，并查看实例运行结果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孙叫兽的博客</title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落。</p>
    </body>
</html>

HTML 文档的后缀名

.html

.htm

都可以。

HTML 简介

实例：

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孙叫兽的博客</title>
</header>
<body>
<h1>这是我的标题</h1>
<p>这是我的段落</p>
</body>
</html>

实例解析

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset=“utf-8”> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

什么是HTML？

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML 标签
HTML 标记标签通常被称为 HTML

标签

HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现的，比如 <b> 和 </b>

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

html元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落</p>

web浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户

html网页结构

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <h1>这是一个标题</h1>
        <p>这是一个段落。</p>
        <p>这是另外一个段落。</p>
    </body>
</html>

html的版本：

<!DOCTYPE>声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

html5

<!DOCTYPE html>

html4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">

xhtml1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。

言

通常文件扩展名在Linux系统上是没有意义的，仅是用来标记该文件属于哪种类型？但是大多数，我们从浏览器上访问Web程序。提交给服务器的文件是带有扩展名的，比如，图片上传，文件上传就是比较经典的一些应用。

那么在编程中如何准确获取文件的扩展名，并根据分类做相应的处理呢？实现的方法有很多。今天我们给大家介绍一些最佳实践。

一个粗糙的示例

获取一张上传图片的扩展名，有些同学可能会这样写：

$userfile_name = $_FILES['image']['name'];
$userfile_extn = explode(".", strtolower($_FILES['image']['name']));

那么直接对文件名进行 explode ，裁切出来的是一个属组。假设我们管控上传文件的最后一个字段是文件的扩展名，那么该文件的扩展名就是 end($userfile_extn)。

这样的实现方法完美吗？有更好的吗？

如果文件名字符串比较特殊，这样的程序会不会 explode 失败返回 False？从而抛出异常？

有可能会！所以这个写法是有 bug 的。

PHP 都准备好函数了！

PHP 是一个工具箱，内置了无数实用的函数。有一个函数就是专门设计来解决这个需求的：pathinfo。下面是用法：

$path = $_FILES['image']['name'];
$ext = pathinfo($path, PATHINFO_EXTENSION);

瞬间就感觉香多了。

还是得多看文档，我把这个函数的参数和用法贴在下面。

所以说尽量不要重复造轮子。官方写好的轮子拿来用就是，它就静静的躺在帮助手册里等着你去发现。

轮子哥

当然程序都是活的。因为我开发者，给出别的解决方案无可厚非。用 PHP 自带的函数实现这个功能本来就有 N 多个办法。下面我们贴几个看起来还不错的轮子。最起码容错性比最上面的那个写法高一些。

比如使用 strrpos + substr 实现的：

$userfile_name = $_FILES['image']['name'];
$userfile_extn = substr($userfile_name, strrpos($userfile_name, '.')+1);

通过查找“.”所在的位置，并向后一位开始截取到字符串末尾。这个写法避免了 explored 截取数组失败，从而返回 false 这个 bug。

再比如，有开发者人为你只是要图片的扩展名，那么大可以直接使用 image 相关的函数 getimagesize：

$image = getimagesize($_FILES['image']['tmp_name']);

getimagesize() 函数将测定任何 GIF，JPG，PNG，SWF，SWC，PSD，TIFF，BMP，IFF，JP2，JPX，JB2，JPC，XBM 或 WBMP 图像文件的大小并返回图像的尺寸以及文件类型和一个可以用于普通 HTML 文件中 IMG 标记中的 height/width 文本字符串。

如果不能访问 filename 指定的图像或者其不是有效的图像，getimagesize() 将返回 FALSE 并产生一条 E_WARNING 级的错误。

上述写法中，如果 $image 不为 false，那么就是一个属组，其中键 mime 返回的就是图片文件类型 image/jpeg 这样的字符串。

但是没什么LUAN用！

写在最后

比较来比较去，还是 pathinfo 最香。

因为这就是 PHP 官方给定的方式，为啥不用？

Happy coding :_)

我是 @程序员小助手，持续分享编程知识，欢迎关注。

在线咨询

上一篇：在Web页面实现圆角效果，CSS3帮你轻松实现，一个人人皆知的属性
下一篇：一张图带你看懂HTML 5的六大优势

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JS - 获取文件后缀，判断文件类型（比如是否为图片格式）

言

一个粗糙的示例

PHP 都准备好函数了！

轮子哥

写在最后

您的项目需求