jszip的应用之解析前端input上传的文件中的内容，解决了内容乱码问题。

时间：2020-05-18 16:51:52 阅读：185 评论：0 收藏：0 [点我收藏+]

需求：在网页端上传压缩文件，同时压缩文件中包含了一个txt的说明文件，需要在前端显示出来。

主要依靠jszip实现，官网https://stuk.github.io/jszip/

js引用：https://www.bootcdn.cn/jszip/#about

主要的问题解决：乱码。。。。。

效果图：

技术分享图片

我引用了的js <script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.3.0/jszip.js"></script>

核心代码：

jszip官网给的例子：

JSZip.loadAsync(f).then(function(zip) {

    zip.files[‘info.txt‘].async("string").then(function(con){
        console.log(con);
     })
                

}, function (e) {
    $result.append($("<div>", {
    "class" : "alert alert-danger",
    text : "Error reading " + f.name + ": " + e.message
     }));
});

我修改的代码：

JSZip.loadAsync(f).then(function(zip) {
……
    zip.files[‘info.txt‘].async(‘blob‘).then(function(blob) {
        readTextAs(blob, "gbk", function (error, text) {
            $("#result").html(text)
        });
    })            

}, function (e) {
    $result.append($("<div>", {
     "class" : "alert alert-danger",
    text : "Error reading " + f.name + ": " + e.message
    }));
});        


function readTextAs(arrayBuffer, encoding, callback) {
    var reader = new FileReader();
    var blob = new Blob([arrayBuffer]);
    reader.onload = function (evt) {
        callback(null, evt.target.result);
    };  
    reader.onerror = function (evt) {
        callback(evt.error, null);
    };  
    reader.readAsText(blob, encoding);
}

再上传一个完整版代码吧

<!DOCTYPE html>
<html>
<head>
    <title>read zip</title>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.3.0/jszip.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jszip/2.6.1/jszip.js"></script> -->
    <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
    <h3>选择一个压缩文件</h3>
    <input type="file" id="file" name="file" multiple /><br />

    <div id="result_block" class="hidden">
          <h3>文件内容 :</h3>
          <div id="result">
              
          </div>
    </div>

    <script type="text/javascript">
        $("#file").on("change", function(evt) {
            $("#result").html("");
            $("#result_block").removeClass("hidden").addClass("show");
            var files = evt.target.files;
            for (var i = 0; i < files.length; i++) {
                handleFile(files[i]);
            }
        })
        function handleFile(f) {
            //显示Zip名和创建filesname的ul容器
            var $title = $("<h4>", {
                text : f.name
            });
            var $fileContent = $("<ul>");
            $("#result").append($title);
            $("#result").append($fileContent);

            // 1) read the Blob
            JSZip.loadAsync(f).then(function(zip) {
                // var dateAfter = new Date();
                // $title.append($("<span>", {
                //     "class": "small",
                //     text:" (loaded in " + (dateAfter - dateBefore) + "ms)"
                // }));

                zip.files[‘info.txt‘].async(‘blob‘).then(function(blob) {
                    readTextAs(blob, "gbk", function (error, text) {
                        $("#result").html(text)
                    });
                })

                // zip.files[‘info.txt‘].async("string").then(function(con){
                   //  console.log(con);
                   //  console.log(str);
                // })
                

            }, function (e) {
                $result.append($("<div>", {
                    "class" : "alert alert-danger",
                    text : "Error reading " + f.name + ": " + e.message
                }));
            });
        }

        function readTextAs(arrayBuffer, encoding, callback) {
              var reader = new FileReader();
              // EDIT : see my other comment below
              // var blob = JSZip.utils.arrayBuffer2Blob(arrayBuffer);
              var blob = new Blob([arrayBuffer]);
              reader.onload = function (evt) {
                callback(null, evt.target.result);
              };  
              reader.onerror = function (evt) {
                callback(evt.error, null);
              };  
              reader.readAsText(blob, encoding);
        }
    </script>
</body>
</html>

jszip的应用之解析前端input上传的文件中的内容，解决了内容乱码问题。

原文：https://www.cnblogs.com/Demiwang/p/12911028.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)