https://wangdoc.com/javascript/bom/file.html

  1. /**
  2.  * 获取文件后缀名
  3.  * @param {String} filename
  4.  */
  5.  export function getExt(filename) {
  6.     if (typeof filename == 'string') {
  7.         return filename
  8.             .split('.')
  9.             .pop()
  10.             .toLowerCase()
  11.     } else {
  12.         throw new Error('filename must be a string type')
  13.     }
  14. }
  15. getExt("1.mp4") //->mp4

File API

在新版 HTML5 的标准中, 针对表单的文件上传, 浏览器提供了 File 和 FileReader 两个对象, 让我们可以获得到文件信息和读取文件.

  1. <form action="?" method="post" enctype="multipart/form-data">
  2.  <input type="file" onchange="return file()"> <!-- 当用户上传了的图片, 把图片设置成 body 的背景 -->
  3.  <input type="submit">
  4. </form>
  5. <script type="text/javascript">
  6.  function file() {
  7.   var f = document.querySelector('input[type=file]')
  8.   var body = document.querySelector('body')
  9.   // f.files[0] 图片信息 name,type,size ...
  10.   // FileReader 载入图像
  11.   reader = new FileReader()
  12.   //回调 readAsDataURL
  13.   reader.onload = function(e) { 
  14.    body.style.backgroundImage = 'url(' + e.target.result + ')'
  15.   }
  16.   reader.readAsDataURL(f.files[0])
  17.  }
  18. </script>

通过 FIle API设置完成的背景图片, 我们通过 Chrome 开发者工具 查看, 可以看见, 图片的地址其实是我们本地的图片, 转换成一组 Base64 编码 | 参考 - Base64.