AJAX异步上传图片文件预览并压缩

一、起到预览作用的是FileReader对象

    <script>  
        window.οnlοad=function(){  
            var f = document.getElementById("file");  
            var fs = document.getElementById("files");    
            f.onchange = function(){  
                var file = this.files[0];  
            
                var reader = new FileReader();  
                
                //reader.result的结果是base64编码数据，直接放入img或者上传到后台
                reader.readAsDataURL(file);  
                reader.onload = function(){  
                    console.log(reader.result);  
                }  
            }  
             
    </script>  

 

 

只需要new一个 FileReader对象，并调用该对象的readAsDataURL方法，对图片进行base64转码，然后在onload中，把this.result放到 <img />标签中即可实现预览功能 

 

二、而AJAX异步上传文件则是依靠js的 FormData 对象

        // 上传图片
        $('#fileImage').change(function () {
            var img = $(this)[0].files[0];
            var formData = new FormData();
            formData.append('file',img);
            $.ajax({
                url:"{php echo mobileUrl('util/uploader',array('file'=>'file'))}",
                type:"post",
                data:formData,
                contentType: false,
                processData: false,
                dataType:"JSON",
                mimeType: "multipart/form-data",
                success:function(data){
                    //展示成功上传的图片
                    $("input[name='examine_pic']").val(data.filename);
                }
            });
        });

 

 

采用一般的表单提交，在后台会获取不到上传的文件数据，所以得用formdata对象

new FormData(id) 中传入form表单的id可以快速便捷的把整个表单的内容添加到formdata对象中

processData和contenType都设置为false 我也不太懂，网上说是防止把表单数据尝试转为字符串

 

三、对图片进行压缩

 

 

 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) {
				}
			 });
		  });
	  
	}