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

时间 2019-12-05 标签 jszip 上传压缩文件服务器

前言:html

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

就不BB啦！直接上干货。ajax

<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>