前端js壓縮上傳圖片 多圖、單圖 ajax上傳
阿新 • • 發佈:2018-12-22
<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 //生成canvas var 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引數進行序列化處理 這裡必須false contentType: false, //必須 success: function (res) { alert('上傳成功'); } }) </script>