码迷,mamicode.com
首页 > Web开发 > 详细

js对图片进行质量压缩后上传服务器

时间:2018-09-14 01:09:04      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:open   最好   ase   TBase   failed   toc   点击   固定   err   

基本的原理就是将图片格式转换成base64格式的,进行压缩,然后再转回固定格式的图片文件,大的形式是以form表单形式进行后台交互的,但里面会new一个form和一个XMLHttpRequest对象,这样可以弥补form表单提交文件没有失败返回的空缺,当限制使用jquery里的AjaxForm的时候,这也是一个很好的选择。

var bl = convertBase64UrlToBlob(base64Codes);
form.append("fileupload", bl, "file_"+Date.parse(new Date())+".jpg")

以下代码是压缩图片的源码,项目里面可以直接拿来复用的:

               var xhr;
                        var fileObj = document.getElementById("postPic").files[0]; // js 获取文件对象
                        var url = ctx+‘/ucenter/activityZp/uploadFileDataAjax‘;//后台接口地址
                        var form = new FormData(); // FormData 对象
                        form.append("act_id",id);
                        form.append("studentIdAndSchoolId",studentId);
                        //alert("原始大小===="+fileObj.size/1024);
                        if(fileObj.size/1024 > 2048) { //大于2M,进行压缩上传
                            photoCompress(fileObj, {
                                quality: 0.5//压缩比例
                            }, function(base64Codes){
                                var bl = convertBase64UrlToBlob(base64Codes);
                                form.append("fileupload", bl, "file_"+Date.parse(new Date())+".jpg");
                                xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
                                xhr.open("post", url, true); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。
                                xhr.onload = uploadComplete; //请求完成
                                xhr.onerror =  uploadFailed; //请求失败
                                xhr.send(form); //开始上传,发送form数据
                                //alert("压缩过")
                            });
                        }else {
                            photoCompress(fileObj, {
                                quality: 1
                            }, function(base64Codes){
                                var bl = convertBase64UrlToBlob(base64Codes);
                                form.append("fileupload", bl, "file_"+Date.parse(new Date())+".jpg");
                                xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
                                xhr.open("post", url, true); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。
                                xhr.onload = uploadComplete; //请求完成
                                xhr.onerror =  uploadFailed; //请求失败
                                xhr.send(form); //开始上传,发送form数据
                            });
                        }

 注意:代码里面点击input的时候,触发选中照片以后,触发以上的压缩图片事件,过程中会new FormData,生成另外一个input,如果同一张图片上传两次,并且都失败,这样就会有可能触发两次交互,导致接口重复调用,以及第二次状态提示框点击事件失效,最好在第一次完成以后刷新当前页面或者找方法销毁这个formdata;

 

<div id="inputReset">
     <input type="file" name="fileupload" accept="image/*" id="postPic" onchange="loadImg()">
</div>

 

js对图片进行质量压缩后上传服务器

标签:open   最好   ase   TBase   failed   toc   点击   固定   err   

原文地址:https://www.cnblogs.com/sakura-lifangfang/p/9644148.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!