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

前端 专栏收录该内容
14 篇文章 0 订阅

前言:

   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>

 

  • 5
    点赞
  • 4
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值