<script>/*三个参数file：一个是文件(类型是图片格式)，w：一个是文件压缩的后宽度，宽度越小，字节越小objDiv：一个是容器或者回调函数photoCompress()*/function photoCompress(file,w,objDiv){var ready=new FileReader();ready.readAsDataURL(file);ready.onload=function(){var re=this.result;canvasDataURL(re,w,objDiv)}}function canvasDataURL(path, obj, callback){var img = new Image();img.src = path;img.onload = function(){var that = this;// 默认按比例压缩var w = that.width,h = that.height,scale = w / h;w = obj.width || w;h = obj.height || (w / scale);var quality = 0.7; // 默认图片质量为0.7//生成canvasvar canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');// 创建属性节点var anw = document.createAttribute("width");anw.nodeValue = w;var anh = document.createAttribute("height");anh.nodeValue = h;canvas.setAttributeNode(anw);canvas.setAttributeNode(anh);ctx.drawImage(that, 0, 0, w, h);// 图像质量if(obj.quality && obj.quality <= 1 && obj.quality > 0){quality = obj.quality;}// quality值越小，所绘制出的图像越模糊var base64 = canvas.toDataURL('image/jpeg', quality);// 回调函数返回base64的值callback(base64);}}/*** 将以base64的图片url数据转换为Blob* @param urlData* 用url方式表示的base64图片数据*/function convertBase64UrlToBlob(urlData){var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while(n--){u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], {type:mime});}var form = new FormData(); //全局变量 FormData 对象//上传文件方法function UpladFile() {var fileObj = document.getElementById("file").files[0]; // js 获取文件对象var url = "后台图片上传接口"; // 接收上传文件的后台地址 if(fileObj.size/1024 > 1025) { //大于1M，进行压缩上传photoCompress(fileObj, {quality: 0.4}, function(base64Codes){var bl = convertBase64UrlToBlob(base64Codes);form.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象});}else{ //小于等于1M 原图上传form.append("file", fileObj); // 文件对象}}//最后ajax上传$.ajax({url: "后台接口地址",type: "POST",data: form,cache: false,//上传文件无需缓存processData: false,//用于对data参数进行序列化处理 这里必须falsecontentType: false, //必须success: function (res) {alert('上传成功');}})</script>
