本文介绍了如何使用jszip和filesaver.js实现在线文件压缩功能。首先通过input type=file获取文件，然后用filereader异步读取文件到内存，接着利用jszip进行文件压缩，最后通过filesaver将压缩文件保存到本地。在实现过程中，面临了文件读取的异步处理和文件大小限制等问题，提出了相应的解决方案。
利用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
最低0.47元/天 解锁文章
扫一扫
503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
