web-dev-qa-db-ja.com

FileReaderとJSZip.jsを使用してブラウザでZipファイルを開く

FileReaderとJSZip.jsを使用してブラウザー内でZipファイルを開き、中に含まれているファイルを処理しようとしています。 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]を表示し、2番目のアラートはTypeErrorを発生させ、archive.file（...）はnullになります。

同じコードでFileReaderのreadAsTextメソッドを使用してテキストファイルを正常に開いたので、エラーが発生した場合は、readAsArrayBuffer（JSZipのドキュメントで推奨）を使用しているか、使用方法に問題があります。 JSZipについて見つけたほとんどすべてのリソースは、loadAsyncの代わりにコンストラクターパラメーターを使用した古いメソッドを使用しているため、正しく使用していない可能性があります。

javascriptfilereaderjszip
13
P.Diddle

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>
6
user1693593