Js 壓縮圖片 ajax 上傳
/* 圖片上傳方法開始 / / 三個引數 file：一個是檔案(型別是圖片格式)， w：一個是檔案壓縮的後寬度，寬度越小，位元組越小 objDiv：一個是容器或者回調函式 photoCompress() / function photoCompress(file,w,objDiv){ var ready=new FileReader(); /開始讀取指定的Blob物件或File物件中的內容. 當讀取操作完成時,readyState屬性的值會成為DONE,如果設定了onloadend事件處理程式,則呼叫之.同時,result屬性中將包含一個data: URL格式的字串以表示所讀取檔案的內容./ 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); } } /
var xhr; //上傳檔案方法 function ajaxFileUpload() { var id = file1; var fileObj = document.getElementById("file1").files[0]; var url = " "; // 接收上傳檔案的後臺地址 var form = new FormData(); // FormData 物件 if(fileObj.size/1024 > 1025) { //大於1M，進行壓縮上傳 photoCompress(fileObj, { quality: 0.2 }, function(base64Codes){ //console.log("壓縮後：" + base.length / 1024 + " " + base); var bl = convertBase64UrlToBlob(base64Codes); form.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 檔案物件 xhr = new XMLHttpRequest(); // XMLHttpRequest 物件 xhr.open("post", url, true); //post方式，url為伺服器請求地址，true 該引數規定請求是否非同步處理。 xhr.onload = function(evt){ var text1= evt.target.responseText; console.log() var str = eval("("+text1.split("}")[0]+"}"+")"); if(str.Success=="1") { alert("上傳成功！"); var _imgUrl = str.URL; /* $(".simditor-body").html($(".simditor-body").html() + "<p><img id='woyu' class='myimg' src='" + _imgUrl + "' style='max-width:800px;height:auto;'/></p>"); //把圖片新增到文字域中 // _editor.sync(); //將編輯器的正文內容同步到 textarea 元素的 val 屬性，返回值為編輯器正文的 HTML 內容。 $("#mmb").css("display","none"); alert("成功啦") */ if($(".simditor-body .child_text").first().text()==""){ $(".simditor-body .child_text").first().remove(); } var _imgUrl = str.URL; var isMyImg="<img style='width:265px;margin-left: 5px;cursor: pointer;' onclick='window.open(\"" + _imgUrl + "\")' src=" + _imgUrl + " />"; if($(".simditor-body .miniu:last").find("img").length>2||$(".simditor-body .miniu:last").find("img").length==0){ $(".simditor-body ").append('<p class="miniu">'+isMyImg+'</p>'); }else{ $(".simditor-body").find(".miniu:last").append(isMyImg); } }else{ alert("上傳失敗！"); }}; //請求完成 xhr.onerror = uploadFailed; //請求失敗 /* xhr.upload.onprogress = progressFunction;//【上傳進度呼叫方法實現】 xhr.upload.onloadstart = function(){//上傳開始執行方法 ot = new Date().getTime(); //設定上傳開始時間 oloaded = 0;//設定上傳開始時，以上傳的檔案大小為0 }; */ xhr.send(form); //開始上傳，傳送form資料 }); }else{ //小於等於1M 原圖上傳 form.append("file", fileObj); // 檔案物件 xhr = new XMLHttpRequest(); // XMLHttpRequest 物件 xhr.open("post", url, true); //post方式，url為伺服器請求地址，true 該引數規定請求是否非同步處理。 xhr.onload = function(evt){ var text1= evt.target.responseText; console.log() var str = eval("("+text1.split("}")[0]+"}"+")"); if(str.Success=="1") { alert("上傳成功！"); var _imgUrl = str.URL; /* $(".simditor-body").html($(".simditor-body").html() + "<p><img id='woyu' class='myimg' src='" + _imgUrl + "' style='max-width:800px;height:auto;'/></p>"); //把圖片新增到文字域中 // _editor.sync(); //將編輯器的正文內容同步到 textarea 元素的 val 屬性，返回值為編輯器正文的 HTML 內容。 $("#mmb").css("display","none"); alert("成功啦") */ if($(".simditor-body .child_text").first().text()==""){ $(".simditor-body .child_text").first().remove(); } var _imgUrl = str.URL; var isMyImg="<img style='width:265px;margin-left: 5px;cursor: pointer;' onclick='window.open(\"" + _imgUrl + "\")' src=" + _imgUrl + " />"; if($(".simditor-body .miniu:last").find("img").length>2||$(".simditor-body .miniu:last").find("img").length==0){ $(".simditor-body ").append('<p class="miniu">'+isMyImg+'</p>'); }else{ $(".simditor-body").find(".miniu:last").append(isMyImg); } }else{ alert("上傳失敗！"); } }; //請求完成 xhr.onerror = uploadFailed; //請求失敗 //xhr.upload.onprogress = progressFunction;//【上傳進度呼叫方法實現】 xhr.upload.onloadstart = function(){//上傳開始執行方法 ot = new Date().getTime(); //設定上傳開始時間 oloaded = 0;//設定上傳開始時，以上傳的檔案大小為0 }; xhr.send(form); //開始上傳，傳送form資料 } } //上傳成功響應 function uploadComplete(evt) { //服務斷接收完檔案返回的結果 var text1= evt.target.responseText; console.log() var str = eval("("+text1.split("}")[0]+"}"+")"); if(str.Success=="1") { alert("上傳成功！"); if($("#"+id+" .child_text").first().text()==""){ $(".simditor-body .child_text").first().remove(); } var _imgUrl = str.URL; var isMyImg="<img style='width:265px;margin-left: 5px;cursor: pointer;' onclick='window.open(\"" + _imgUrl + "\")' src=" + _imgUrl + " />"; if($("#"+id+" .miniu:last").find("img").length>2||$("#"+id+" .miniu:last").find("img").length==0){ $("#"+id).append('<p class="miniu">'+isMyImg+'</p>'); }else{ $("#"+id).find(".miniu:last").append(isMyImg); } }else{ alert("上傳失敗！"); } } //上傳失敗 function uploadFailed(evt) { alert("上傳失敗！"); } //取消上傳 function cancleUploadFile(){ xhr.abort(); } /* 圖片上傳方法結束 */
附一個小例子