jszip的應用之解析前端input上傳的文件中的內容，解決了內容亂碼問題。

本文轉載自查看原文 2020-05-18 15:51 768 前端js

需求：在網頁端上傳壓縮文件，同時壓縮文件中包含了一個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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 解決文件上傳時，服務器中中文文件名亂碼問題解決IDEA springBoot讀取*.properties文件中文內容亂碼的問題解決ini-parser解析ini文件中文亂碼問題上傳文件到linux亂碼問題 jmeter實際場景應用之測試上傳excel文件 Java中FTPClient上傳中文目錄、中文文件名亂碼問題解決方法解決爬蟲網頁內容亂碼問題解決Eclipse中.properties文件中文亂碼問題 PHP文件上傳並解決中文文件名亂碼問題上傳文件的input問題以及FormData特性