今日发现电脑用惯了的解压缩工具,居然在手机领域这么惨。下了十几个软件不是广告播放器就是各种 VIP,反正就是要钱,一气之下自己写一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<title>免费文件解压缩</title>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jszip/3.7.1/jszip.js"
type="application/javascript"></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/FileSaver.js/2014-08-29/FileSaver.js"
type="application/javascript"></script>
<style>
body {
/* background-color: #fae8b73b; */
}
h3 {
text-align: center;
color: #1989fa;
}
#uploadArea {
min-height: 100px;
max-height: 200px;
overflow-y: auto;
border: 1px dashed rgb(133, 133, 133);
border-radius: 3px;
color: rgb(189, 188, 188);
padding: 20px;
text-align: left;
/* line-height: 100px; */
margin: 10px 0;
}
.btns {
display: flex;
justify-content: space-evenly;
padding: 0 20px;
}
.btn {
background: #1989fa;
border: inherit;
border-color: #1989fa;
border-radius: inherit;
color: white;
width: 60px;
display: inline-block;
height: 28px;
line-height: 28px;
flex: 1;
}
.btn+.btn {
margin-left: 20px;
}
#dir ul {
padding: 10px 10px;
margin: 10px 0;
border: 1px dashed rgb(133, 133, 133);
border-radius: 5px;
}
.link {
display: block;
margin-bottom: 10px;
padding: 0 10px;
background: #f0f0f0;
border: 1px solid #cfdbde;
border-radius: 5px;
font-weight: bold;
line-height: 24px;
color: #353942b2;
}
</style>
</head>
<body>
<h3>免费文件解压缩</h3>
<div id="uploadArea" onclick="document.getElementById('file').click()"><input type="file" id="file" class="btn"
multiple onchange="filechange(this)" style="display: none;">
<span id="uploadAreaText">点击选择文件</span>
</div>
<div class="btns">
<button onclick="onzip()" class="btn">压缩</button>
<button onclick="onunzip()" class="btn">解压</button>
</div>
<div id="dir"></div>
</body>
<script>
let zip = new JSZip();
function filechange(e) {
console.log(e.files[0].name)
var fileNames = ''
for (let i = 0; i < e.files.length; i++) {
fileNames += (i + 1) + " . " + e.files[i].name + '<br>';
}
document.getElementById("uploadAreaText").innerHTML = fileNames
}
async function onzip() {
let fileEle = document.body.querySelector("#file");
try {
zip = new JSZip();
var folder = zip.folder("files");
for (let i = 0; i < fileEle.files.length; i++) {
let file = fileEle.files[i];
folder.file(file.name, file);
}
zip.generateAsync({ type: "blob" }).then(function (content) {
saveAs(content, Date.now() + ".zip");
});
} catch (error) {
}
}
async function download(filename) {
var downloadButton = document.createElement("a"),
URL = window.webkitURL || window.mozURL || window.URL;
downloadButton.href = URL.createObjectURL(await zip.files[filename].async("blob"));
downloadButton.download = filename;
downloadButton.click();
}
function onunzip() {
let fileEle = document.body.querySelector("#file");
try {
zip = new JSZip();
zip.loadAsync(fileEle.files[0]).then(content => {
let html = "";
for (let name in content.files) {
if (!content.files[name].dir)
html += `<li onclick='download("${name}")' class="link"><a>${name}</a></li>`
}
dir.innerHTML = `<ul>${html}</ul>`;
// $.fn.zTree.init($("#tree"), { view: { selectedMulti: false } }, zTreeNodes);
})
} catch (error) {
alert("发生错误,可能不是压缩文件")
}
}
</script>
</html>