使用 FileReader 和 JSZip.js 在浏览器中打开 zip 文件
Posted
技术标签:
【中文标题】使用 FileReader 和 JSZip.js 在浏览器中打开 zip 文件【英文标题】：Opening zip files in browser with FileReader and JSZip.js 【发布时间】：2016-10-18 23:11:08 【问题描述】：我正在尝试，然后处理其中包含的文件。我不知道如何正确地将 FileReader 对象传递给 JSZip。
这是我用来加载 javascript 的页面的精简版：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="zipscan.js"></script>
<script type="text/javascript" src="jszip.js"></script>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="openFile"><input type="file" id="inputFile" /></div>
</body>
</html>
以及删除所有不必要代码后 zipscan.js 中的 javascript：
function checkFiles()
//Check support for the File API support
if ( window.File && window.FileReader && window.FileList && window.Blob )
var fileSelected = document.getElementById( "inputFile" );
fileSelected.addEventListener( "change", handleFile, false );
else
alert( "Files are not supported" );
function handleFile( evt )
//Set wanted file object
var fileToRead = evt.target.files[0];
//Create fileReader object
var fileReader = new FileReader();
fileReader.onload = function ( e )
//Create JSZip instance
var archive = new JSZip().loadAsync( e.target );
//Testing that it is loaded correctly
alert( e.target );
alert( archive.file( "hello.txt" ).name );
fileReader.readAsArrayBuffer( fileToRead );
window.addEventListener( "load", checkFiles, false );
第一个警报显示 [object FileReader]，第二个导致 TypeError，archive.file(...) is null.
我已经使用 FileReader 的 readAsText 方法和相同的代码成功打开文本文件，所以如果出现错误，要么是使用 readAsArrayBuffer（JSZip 文档建议它），要么是我使用它的方式。我发现的几乎所有关于 JSZip 的资源都使用带有构造函数参数的旧方法而不是 loadAsync，所以可能是我没有正确使用它。
【问题讨论】：
【参考方案1】：您可以直接传递File 对象，而无需通过FileReader。 File 对象本身就是一个（扩展的）Blob，JSZip 可以将其作为loadAsync() 的参数。
工作示例
f.onchange = function()
var zip = new JSZip();
zip.loadAsync( this.files[0] /* = file blob */)
.then(function(zip)
// process ZIP file content here
alert("OK")
, function() alert("Not a valid zip file"));
;<script src="https://raw.githubusercontent.com/Stuk/jszip/master/dist/jszip.min.js">
</script>
<input type=file id=f>【讨论】：
以上是关于使用 FileReader 和 JSZip.js 在浏览器中打开 zip 文件的主要内容，如果未能解决你的问题，请参考以下文章