前端使用JSZIP 预览压缩包中的图片

最新推荐文章于 2025-03-08 10:03:56 发布

Auspicious5

最新推荐文章于 2025-03-08 10:03:56 发布

阅读量7.6k

点赞数

分类专栏：前端开发文章标签：前端 js

本文链接：https://blog.youkuaiyun.com/lovefive5/article/details/80527320

版权

前端开发专栏收录该内容

18 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jszip.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
    <script src="jszip-utils.js"></script>
</head>
<body>

<div id="jszip_utils">
</div>

<script>
    var promise = new JSZip.external.Promise(function (resolve, reject) {
        JSZipUtils.getBinaryContent('test4.rar', function (err, data) {
            if (err) {
                console.log(err);
                reject(err);
            } else {
                console.log(data);
                resolve(data);
            }
        });
    });


    promise.then(JSZip.loadAsync)                  
        .then(function (zip) {
            console.log(zip);
            for (var key in zip.files) {
                //内置函数,判断是否是文件夹
                if (!zip.files[key].dir) {
                    var base = zip.file(zip.files[key].name).async("base64");
                    base.then(function (res) {
                        console.log(res);
                        $("#jszip_utils").append("<image src='data:image/png;base64," + res + "'></image>");
                    })
                }
            }
        })
        .then(
            function success(data) {                 
            }, function error(e) {
            });
    var i = 0;
    setInterval(function () {
        //console.log("等待了："+i+"s");
        i++;
    }, 1000);
</script>
</body>
</html>