前端实现对ZIP 压缩文件解压，实现前端直接展示结果，比如图片,压缩包等 audio对象进行播放

其中后台代码，很简单:

        /// <summary>/// 获取压缩的zip文件/// </summary>/// <returns></returns>public ActionResult ZipFile(){string b = "host.zip";string c = "1.zip";byte[] data = System.IO.File.ReadAllBytes(Path.Combine(AppContext.BaseDirectory, c));return File(data, "application/zip");}

前端需要用到的Lib

https://www.bootcdn.cn/jszip/
https://www.bootcdn.cn/FileSaver.js/

整体效果代码

<body><audio id="MP3Play" controls></audio><input id="Play" onclick="Play()" value="播放" type="button" />
</body>
</html>
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/JS/jszip.js"></script>
<script src="~/JS/FileSaver.js"></script>
<script type="text/javascript">$(function () {var xmlhttp;xmlhttp = new XMLHttpRequest();xmlhttp.open("GET", "/home/ZipFile", true);xmlhttp.responseType = "blob";xmlhttp.onload = function () {console.log(this);if (this.status == 200) {var blob = this.response;var new_zip = new JSZip();new_zip.loadAsync(blob).then(function (file) {var files = file.files;for (let f in files) {var zipobj = files[f];if (!zipobj.dir) {new_zip.file(f).async("blob").then(function (blob) {//获取blob对象地址，并把值赋给容器var mp3url = URL.createObjectURL(blob);$("#MP3Play").attr("src", mp3url);//setTimeout("revokeUrl('" + mp3url + "')", "2000");});}}});}}xmlhttp.send();});
</script>
<script type="text/javascript">function Play() {var play = document.getElementById("MP3Play");play.play();}function revokeUrl(url) {window.URL.revokeObjectURL(url);console.log("开始准备播放");}
</script>

实现了对压缩文件的解压，以及Audio赋值，进行播放，测试过，结果正常。

前端实现对ZIP 压缩文件解压，实现前端直接展示结果，比如图片,压缩包等 audio对象进行播放相关推荐

android下载zip到assets,Android将assets中的zip压缩文件解压到SD卡
程序首先要获取写外部存储权限: 程序: package com.hu.andstar; import java.io.File; import java.io.FileOutputStream; im ...
java 压缩空目录_java zip压缩与解压-支持空目录，保留文件修改时间
java zip压缩与解压-支持空目录,保留文件修改时间. 依赖于commons-io,commons-compress [Java]代码 import java.io.BufferedInputSt ...
android assets解压,Android assets内压缩文件解压，解压到缓存示例
1.assets内压缩文件解压AssetsZipUtils,包含一个获取文件夹下所有文件路径的方法,方便获取文件使用 public class AssetsZipUtils { public stat ...
正确的 zip 压缩与解压代码
网上流传的zip压缩与解压的代码有非常大的问题尽管使用了ant进行压缩与解压,可是任务的流程还是用的java.util.zip 的方式写的,我在使用的过程中遇到了压缩的文件夹结构有误,甚至出现不同 ...
Linux中压缩和解压（gzip压缩/gunzip解压）（zip压缩/unzip解压）（tar打包解压）
文章目录 Linux中压缩和解压(gzip压缩/gunzip解压)(zip压缩/unzip解压)(tar打包解压) 一.gzip压缩 / gunzip解压 1.命令 2.注意 3.案例 4.常用二. ...
20191004在LINUX下如何将tar压缩文件解压到指定的目录下
百度搜索:tar 解压缩到指定目录 https://zhidao.baidu.com/question/9844116.html 在LINUX下如何将tar压缩文件解压到指定的目录下各位,请教一下在 ...
linux 压缩文件解压到到指定的目录
工作中经常碰到把一个压缩文件解压到指定的目录下面,例如把/home/ybj/Desktop目录下的 httpd-2.2.15.tar.gz 这个压缩文件解压到 /home/ybj 这里:tar zxv ...
java gz压缩文件解压
java gz压缩文件解压 gzFileName压缩文件全路径 targetFileName解压后的文件全路径 public boolean unGzFile(String gzFileName,St ...
手机中的Zip格式文件解压和文件夹的压缩
今天主要跟大家介绍下如何通过代码把手机存储中的zip文件解压到指定的地方以及如何对很多文件或者文件夹进行压缩生成zip格式的压缩文件. 1.将某个Zip文件解压到指定目录下: /*** 解压缩一个Zi ...

前端实现对ZIP 压缩文件解压，实现前端直接展示结果，比如图片,压缩包等 audio对象进行播放

前端实现对ZIP 压缩文件解压，实现前端直接展示结果，比如图片,压缩包等 audio对象进行播放相关推荐

最新文章

热门文章