jsZip上传,jsZip压缩文件并上传到服务器

最新推荐文章于 2024-06-06 10:02:08 发布
置顶 最新推荐文章于 2024-06-06 10:02:08 发布
阅读量1w 收藏 17
点赞数 7
分类专栏： 前端 文章标签： JsZip
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq2523208472/article/details/83578722
版权

前言:

   JsZip客户端压缩客户选择的文件并上传。

就不BB啦 ！直接上干货。

<html>
<head>
 <title>客户端压缩文件测试</title>
 <script src="./jquery.min.js" ></script>
 <script src="./jszip.js" ></script>
</head>
<body>
 <span>选择文件:</span><input type="file" id="files1" /> <hr>
 <button onclick="toZip()" >压缩选择的文件并上传</button>
 <script >
    function toZip(){
	  
	     //file.files 是一个fileList对象 fileList里面是file对象
          var file = document.getElementById("files1");
		 
		 //文件读取成功 将文件打包成zip
		 
		  var zip = new JSZip();
		  
		  //添加需要压缩的文件 file对象
		  zip.file(file.files[0].name, file.files[0]);
          //zip.file("mimetype", "application/zip");
		  
		  //return promise对象   该方法是异步方法 需要注意！上传和修改文件内容需要在此方法中，我就是因为这个坑浪费三四个小时
		  zip.generateAsync({type:"Blob",compression: "DEFLATE"}).then(function(content) {
		  
		    //第一种方法
		    //创建file对象
			var fils = new File([content],'test.zip',{type: "zip"});
			 
			//创建提交表单 并将file对象放入form表单中
			var formData = new FormData();
			formData.append("file",fils);
			  
			//第二种方法 未测试 这个我也是看别人的:https://www.jianshu.com/p/cda557daad1f
			var fromData2 = new FormData();
			formData.append("blob",content);
			
			//ajax上传formData
			 $.ajax({
				url:'upload',
				type:'POST',
				data:formData,
				processData:false,
				contentType:false,
				success:function (data) {
				}
			 });
		  });
	  
	}
 </script>
<body>
<html>

 

云海梦尘
关注
  • 7
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
jszip压缩文件上传到服务器,2. jszip文件夹打包上传
weixin_34561373的博客
08-13 1108
[TOC][jszip官网](https://stuk.github.io/jszip/documentation/api_jszip/generate_async.html)### 1. 安装~~~npm install jszipyarn add jszip // 亲测有效~~~### 2. 引入~~~import JSZip from 'jszip';import * as JSZip f...
jszip压缩服务器文件,JSZip压缩与解压的基本使用
weixin_30366435的博客
08-12 2540
//相关api介绍，具体可参考jszip源码中的注释/*** 从文档中读取文件** @param Path 要读取文件的相对路径* @return File matching path, null if no file found*/JSZip.file(path: string): JSZip.JSZipObject | null;/***把读取的文件内容以哪中格式展示出来*OutputType...
jszip实现多层目录多文件压缩成zip上传到服务器或下载功能
qq_21207803的博客
06-28 706
而this.currentResultReviewCatalogs.stageChild的值是配置出来的(目录层级)将上传的文件按照一级目录 + ‘-’ + 二级目录的形式存在list中。如需表单提交到服务端。
前端 Vue 操作文件方法（导出下载、图片压缩、文件上传和转换）
最新发布
无解的菜鸟晖 的博客
06-06 1399
本文对前端 Vue 项目开发过程中，经常遇到要对文件做一些相关操作，比如：文件导出下载、文件上传、图片压缩、文件转换等一些处理方法进行归纳整理，方便后续查阅和复用。1、后端的文件导出接口，返回数据是文件流 blob，转成 url 链接下载；2、后端接口返回数据是文件下载的 url 链接；3、文件 file 或文件流 blob 转成 base64；4、base64 转成文件 file 或文件流 blob；5、压缩图片文件的方法封装；6、通过第三方库image-conversion 压缩图片；7、前端上传图片
JSZip前端上传压缩包，将压缩包里面的文件上传给后端
weixin_43913004的博客
05-25 1842
JSZip前端上传压缩包，将压缩包里面的文件上传给后端
使用 jszip 实现.zip文件解压后上传
zrtoooo0的博客
10-16 2173
前端使用 jszip 实现.zip文件解压后上传
js对图片进行压缩，并上传
weixin_40841731的博客
08-07 2100
以下代码，可以直接拷进html文件中，在浏览器打开即可看到效果。
js 压缩图片上传
10-11 1425
js 压缩图片， 上传，
前端js使用jszip实现文件压缩功能
07-24
JSZip是一个非常实用的JavaScript库，它允许我们在浏览器环境中实现文件的压缩与解压缩，无需服务器端的支持。在这个场景中，我们将讨论如何利用JSZip和FileSaver.js库在前端实现文件的压缩并下载为ZIP格式。 首先...
基于jsZip库 解压读取文件 对文件重命名 删除文件 打包文件 下载到本地
09-22
这个例子展示了jsZip的基本使用流程，实际项目中可能需要根据具体需求进行调整，例如从服务器获取文件内容，或者处理用户上传的ZIP文件。 总之，jsZip库为前端开发者提供了强大的文件压缩和管理能力，使得在浏览器...
在vue.js中使用JSZip实现在前端解压文件的方法
10-18
在Vue.js应用中，使用JSZip库实现在前端解压文件是一种常见的需求，尤其是在处理用户上传的压缩文件时。JSZip是一个强大的JavaScript库，它允许我们在浏览器环境中读取、创建和操作ZIP文件。以下是实现这一功能的...
js上传zip文件java解压.txt
08-02
jsp页面上传zip压缩包，用ajax传给后端进行解压，创建路径解压存储在本地，然后程序调用解压后的文件进行操作，然后再删除临时文件夹。用于批量导入信息和照片，然后ajax回调导入结果返回前端显示给操作者。
文件上传的js.rar
04-23
1.支持多文件上传、单文件上传、图片上传(支持word、pdf、excel、.jpg、txt等文件上传) 2.都是有写好的Dome可以直接拿来用;容易出错的地方文件夹里面也有整理 3. 我有写相关文章 https://blog.csdn.net/LMGD_ 文件上传的文章里面可以看到实现的效果图片;respect！！！！
JS上传文件大小验证.rar
10-20
JS上传文件大小验证 自己写的方法，不是完整控件。 可以拿去借鉴。
jszip.zip 资源文件
09-30
通过JSZip，开发者可以在服务器端预处理资源，然后将ZIP文件传输到客户端，再进行解压和使用。 3. **在Cocos Creator中的实践** Cocos Creator同样是一款跨平台的游戏开发工具，它采用JavaScript进行编程。JSZip...
JsZip源代码及中文说明文档
10-18
例如，用户可以选择多张图片，使用JsZip将其打包成.zip文件供下载，或者从服务器下载.zip文件，在浏览器中预览或解压其中的内容。 ## 6. 注意事项 - 安全性：由于同源策略限制，JsZip无法直接操作跨域的文件，除非...
前端原生js图片压缩上传
m0_61447532的博客
01-13 286
以下是文本内容便于复制 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"/> <metaname="viewport"content="width=device-width,initial-scale=1.0"/> <title>压缩图片</title> ...
前端本地zip文件上传到后台
angelia_w的博客
04-30 5313
最近和后台交互时，需要一个功能，把用户本地的zip文件上传到后台，用于计算分析数据。本来想自己原生代码实现，奈何臣妾做不到啊，实在太难了，还是用node的form-data实现了此功能，比自己写好多了，神清气爽。 form-data地址：form-data 用于创建可读"multipart/form-data"流的库。可用于将表单和文件上载提交到其他Web应用程序。 用法： 1....
jszip递归压缩文件夹的文件，读取文件流
知行合一
03-17 717
5、压缩输出的文件夹名称。
微信小程序 jszip 例子
07-16
### 回答1： jszip是一个用于压缩和解压缩文件的JavaScript库，可以在微信小程序中使用。下面是一个使用jszip库的微信小程序例子： 1. 首先，在微信小程序的项目中引入jszip库，可以通过npm安装后引入，或者下载库的源代码并拷贝到项目的目录中。 2. 在需要使用jszip的页面或组件中，导入jszip库的代码： ```javascript var JSZip = require('jszip') ``` 3. 创建一个新的jszip实例： ```javascript var zip = new JSZip(); ``` 4. 向zip文件中添加文件： ```javascript zip.file("hello.txt", "Hello World"); zip.file("subfolder/test.txt", "This is a test"); ``` 5. 将zip文件保存为二进制数据： ```javascript zip.generateAsync({type:"blob"}) .then(function(content) { // content 是一个Blob对象，可以保存为文件或上传到服务器 wx.saveFile({ tempFilePath: content, success: function(res) { var savedFilePath = res.savedFilePath; console.log('文件保存成功，路径为：', savedFilePath); }, fail: function() { console.log('文件保存失败'); } }) }); ``` 以上代码中，我们首先创建了一个新的jszip实例，然后向zip文件中添加了两个文件。接下来，使用generateAsync方法将zip文件生成为二进制数据，最后调用微信小程序的saveFile将文件保存到本地。 这是一个简单的使用jszip库的微信小程序例子，你可以根据实际需要进行更复杂的操作，如解压缩文件等。 ### 回答2： 在微信小程序中使用jszip可以方便地实现文件的压缩和解压缩功能。下面举一个例子来说明如何使用jszip来压缩和解压缩文件。 首先，我们需要在微信开发者工具中引入jszip库。可以在项目根目录下创建一个libs文件夹，并将jszip.js文件拷贝进去。 压缩文件的例子： 1. 创建一个button按钮，并绑定一个点击事件。 2. 在点击事件的回调函数中，首先获取要压缩的文件路径，可以通过wx.chooseImage或wx.chooseVideo等API来选择。 3. 使用wx.getFileSystemManager().readFile()方法读取文件内容，并将内容转为ArrayBuffer。 4. 创建一个Zip实例，然后使用addFile()方法将文件内容添加到压缩包中。 5. 调用generateAsync()方法生成压缩包。 6. 将生成的压缩包保存到本地，可以使用wx.getFileSystemManager().writeFile()方法来保存。 解压文件的例子： 1. 创建一个button按钮，并绑定一个点击事件。 2. 在点击事件的回调函数中，先选择要解压的压缩包文件。 3. 使用wx.getFileSystemManager().readFile()方法读取压缩包文件的内容，并将内容转为ArrayBuffer。 4. 创建一个Zip实例，然后使用loadAsync()方法加载压缩包。 5. 调用file方法获取压缩包中的所有文件，然后使用asyncForEach()方法循环解压每个文件。 6. 使用await关键字来等待解压完成后再进行下一步操作。 以上就是使用微信小程序中的jszip库实现文件压缩和解压缩的一个简单例子。如果需要更多详细的代码和具体的API的使用方法，可以查阅jszip的官方文档或在小程序开发社区中寻求帮助。 ### 回答3： JSZip是一个JavaScript库，用于创建、读取和修改ZIP文件。它可以在微信小程序中使用，以实现一些ZIP文件相关的功能。 以下是一个使用JSZip库的示例代码，实现了在微信小程序中创建和读取ZIP文件的功能： ```javascript // 导入JSZip库 const JSZip = require('jszip'); // 创建一个新的ZIP实例 const zip = new JSZip(); // 添加文件到ZIP中 const fileContent = 'Hello World!'; zip.file('example.txt', fileContent); // 生成ZIP文件 zip.generateAsync({ type: 'blob' }) .then(function(content) { // 将生成的ZIP文件保存到本地 wx.saveFile({ tempFilePath: content, success: function(res) { // 保存成功后的回调函数 console.log('ZIP文件保存成功', res.savedFilePath); // 读取ZIP文件内容 wx.getFileSystemManager().readFile({ filePath: res.savedFilePath, success: function(data) { // 解析ZIP文件 JSZip.loadAsync(data) .then(function(zip) { // 读取ZIP中的文件 const file = zip.file('example.txt'); if (file !== null) { // 打印文件内容 console.log(file.name, file.asText()); } }); }, fail: function(err) { console.error('读取ZIP文件失败', err); } }); }, fail: function(err) { console.error('保存ZIP文件失败', err); } }); }); ``` 以上示例代码演示了如何使用JSZip在微信小程序中创建一个包含"example.txt"文件的ZIP文件，并且将生成的ZIP文件保存到本地，然后再读取ZIP文件中的文件内容并打印出来。 需要注意的是，微信小程序只支持保存文件到本地和读取本地文件的操作，所以在上述代码中使用了保存文件和读取文件的微信API进行相应的操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值