fakepath详解

在前端开发中，我们经常使用文件上传功能，而对于文件上传功能，需要选择本地文件并上传，而选择本地文件时，我们需要使用元素来实现，而在用户选择完文件后，元素会在其value属性中保存所选文件的路径，这个路径就是fakepath。

一、fakepath概述

fakepath是一种路径表示形式，是由浏览器为了安全性而实现的，主要针对元素的value属性，以避免暴露本地文件系统的真实路径。

虽然fakepath是一个虚假路径，但在前端开发中，我们可以通过它来获取所选文件的名称、后缀名等信息，从而完成相关操作。

二、fakepath的使用

1. JS获取文件名称

let fileInput = document.getElementById('fileInput');
let fileName = fileInput.value.split('\\').pop(); // 获取文件名
console.log(fileName); // 打印文件名称

上述代码使用了字符串的split()方法和数组的pop()方法来获取文件名称。我们把输入框的值用反斜杠\分割成数组，然后把数组的最后一个元素弹出并返回，也就是文件名。

2. JS获取文件后缀名

let fileInput = document.getElementById('fileInput');
let fileArr = fileInput.value.split('.');
let fileExt = fileArr[fileArr.length - 1]; // 获取文件后缀名
console.log(fileExt); // 打印文件后缀名

上述代码使用了字符串的split()方法和数组的length属性来获取文件后缀名。我们把输入框的值用点.分割成数组，然后获取数组的最后一个元素，也就是文件后缀名。

三、fakepath的注意事项

1. 不同浏览器显示不同

由于fakepath是浏览器生成的，不同浏览器生成的路径可能不同，因此我们在处理fakepath的时候不能假设路径格式固定。

2. 不能通过JavaScript修改fakepath

由于fakepath是浏览器生成的虚假路径，因此我们不能通过JavaScript来修改它，否则可能会出现安全问题。

3. fakepath中不包含文件内容

需要注意的是，在浏览器进行文件上传时，fakepath中只包含文件的路径和名称，不包含文件的实际内容。

四、结语

fakepath虽然是一个虚假路径，但在前端开发中却扮演重要的角色，通过它我们可以实现文件上传并获取所需的文件信息，从而提高网站的用户体验。