利用js实现了在线压缩功能,思路如下:
1、利用input type=file标签,上传多个文件。
2、使用filereader,读取上传的文件到内存中。
3、使用jszip插件,压缩上传的文件
4、使用filesaver插件,将压缩的文件存回本地。
实现过程中遇到如下难点,列在下边,方便大家遇到类似问题,可以搜索到本文。
1、用input type=file上传文件后,取得的是files数组,每个file对象,仅仅包含文件信息,并不是文件本身。
2、想读取本地文件,需要使用filereader对象,由于io操作本身耗时,所以filereader被设计成异步读取。filereader本身无法直接读取files数组,使用for循环遍历数组,逐一读取file对象,最直接的想法是在每个for循环中new 一个filereader对象,分别读取。没有采用是因为对js的线程和内存模型不了解,无法对多线程施加有效的控制。比较希望实现同步读取,读取过程中,主线程挂起,等待文件逐个读完后,再继续后边的操作,但搜索下来,没找到同步读取插件,所以需要自己实现。
实现代码如下(chrome 73.0.3683.103 测试通过):
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>在线压缩</tit