前端FileReader 文件预览

发布时间 2023-04-07 14:49:34作者: Math点PI

这玩意好像挺强,可以操作用户选择的文件,转为base64或者二进制,blob;

1、实际应用
我的行车记录仪记录事反着放的,所以查看视频都是反过来的,那么我就写了个html,选择对应视频反向播放;

input框选择视频文件后,我们就能拿到当前视频文件,使用

let f = new FileReader()
f.readAsDataURL( $('#file').get(0).files ) ; 
f.onload = function () {
  $video.attr('src', f.result)
}

这波操作直接把文件读到内存里面,100MB,然后拿来本地播放;再加个css旋转180度搞定;

2、除了视频,图片文件也行哦;这样的话可以做很多事哦
1)可以实现文件预览
2)配合canvas绘图可以进行图片压缩