「ファイルのダウンロード」で作成した圧縮されたテキストファイルと画像ファイルをブラウザにアップロードして、ブラウザで表示します。

解凍ライブラリ

圧縮したファイルの解凍は、解凍ライブラリ「zlib.js」の「zlib.js/bin/unzip.min.js」を使用します。解凍ライブラリはフォルダ「fileupload/js」に置きます。

ファイルのアップロードアプリの作成

ファイルのアップロードアプリを次のように作成します。

fileupload/index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>ファイルアップロード</title>
</head>

<body>
    <div class="container">
        <div id="local" class="col-10">
            <div id="drop" class="border p-5 my-4" style="width:100%; text-align: center;"
                ondragover="onDragOver(event)" ondrop="onDrop(event)">圧縮ファイルのドロップ</div>
        </div>
        <div id="list" class="col-10"></div>
        <p id="text">demo1</p>
        <div class="image">
            <p>画像:</p>
            <img src="" alt="サンプル">
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/unzip.min.js"></script>

</body>

</html>

fileupload/js/main.js

let zipfolders = [];

function onDrop(event) {
    var dropdata = "";

    var files = event.dataTransfer.files;

    for (var i = 0; i < files.length; i++) {
        var f = files[i];
        // （2）ファイル名とサイズを表示
        dropdata += "ファイル名01 :" + f.name + "ファイルの型:" + f.type + "ファイルサイズ:" + f.size / 1000 + " KB ";
    }
    console.log(dropdata);

    event.preventDefault();

    let zipReader = new FileReader();

    zipReader.onload = function () {
        try {
            let zipArr = new Uint8Array(zipReader.result);
            unzip = new Zlib.Unzip(zipArr);
            importFileList = unzip.getFilenames();

            for (let i = 0; i < importFileList.length; i++) {
                zipfolders.push(importFileList[i].split('/')[0]);
            }
            console.log(zipfolders);

            let str = "";
            for (let i = 0; i < zipfolders.length; i++) {
                str += zipfolders[i] + " ";
            }
            $('#list').html("含まれるフォルダ: " + str);

            for (let i = 0; i < importFileList.length; i++) {
                console.log(importFileList[i]);
                let Buffer_bin = unzip.decompress(importFileList[i]);
                let Buffer_txt = utf8ArrayToStr(Buffer_bin);

                let ext = importFileList[i].split('.')[1];
                switch (ext) {
                    case 'txt':
                        $('#text').html("ファイル内テキスト: " + Buffer_txt);
                        break;
                    case 'png':
                        dataURI = new Blob([Buffer_bin], { type: 'image/jpeg' });

                        blob_url = window.URL.createObjectURL(dataURI);
                        $('.image').children('img').attr('src', blob_url);
                        break;
                }
            }
        } catch (e) {
            console.log("except: " + e.message);
        }
    }
    zipReader.readAsArrayBuffer(files[0]);
}

function utf8ArrayToStr(array) {
    var len = array.length;
    var out = "";
    var i = 0;
    var char1, char2, char3;

    while (i < len) {
        char1 = array[i++];
        switch (char1 >> 4) {
            case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
                out += String.fromCharCode(char1);
                break;
            case 12: case 13:
                char2 = array[i++];
                out += String.fromCharCode(((char1 & 0x1F) << 6) | (char2 & 0x3F));
                break;
            case 14:
                char2 = array[i++];
                char3 = array[i++];
                out += String.fromCharCode(((char1 & 0x0F) << 12) |
                    ((char2 & 0x3F) << 6) |
                    ((char3 & 0x3F) << 0));
                break;
        }
    }
    return out;
}

function onDragOver(event) {
    // （4）ブラウザ上でファイルを展開する挙動を抑止
    event.preventDefault();
}

ファイルのアップロードアプリの実行

URL「http://localhost/fileupload/」をアクセスし、「ファイルのダウンロード」で作成した圧縮ファイルをドラッグすると、解凍して、テキストと画像が表示されます。