js對圖片進行質量壓縮后上傳服務器

基本的原理就是將圖片格式轉換成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>