一、關(guān)于js上傳圖片壓縮的方法，百度有很多種方法，這里我參考修改了一下

function photoCompress(file, w, objDiv) {var ready = new FileReader();/*開始讀取指定的Blob對象或File對象中的內(nèi)容. 當(dāng)讀取操作完成時(shí),readyState屬性的值會(huì)成為DONE,如果設(shè)置了onloadend事件處理程序,則調(diào)用之.同時(shí),result屬性中將包含一個(gè)data: URL格式的字符串以表示所讀取文件的內(nèi)容.*/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;// 默認(rèn)按比例壓縮var w = that.width,h = that.height,scale = w / h;w = obj.width || w;h = obj.height || (w / scale);var quality = 0.5; // 默認(rèn)圖片質(zhì)量為0.7//生成canvasvar canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');// 創(chuàng)建屬性節(jié)點(diǎn)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);// 圖像質(zhì)量if(obj.quality && obj.quality <= 1 && obj.quality > 0) {quality = obj.quality;}// quality值越小，所繪制出的圖像越模糊var base64 = canvas.toDataURL('image/jpeg', quality);// 回調(diào)函數(shù)返回base64的值callback(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});}

以上是壓縮圖片的方法，核心是將圖片放入canvas內(nèi)，再用canvas.toDataURL方法進(jìn)行壓縮，最后生成一個(gè)Blob對象。

注：因?yàn)闋砍兜絚anvas，所以低版本瀏覽器應(yīng)該是不支持的吧（有待考證）

二、圖片壓縮的方法有了，怎么使用呢？怎么上傳到后臺(tái)呢？往下看！

html部分：

<form action="file/uploadDoc" enctype="multipart/form-data" method="post" id="form"><input type="file" id="file" name="file" /><input type="submit" value="上傳" /></form>

js部分：

$("#file").change(function() {var formData = new formData("form");var file = this.files[0];photoCompress(file, {quality: 0.5,}, function(base64Codes) {var bl = convertBase64UrlToBlob(base64Codes);formData.set("file", bl, file.name);});});

當(dāng)選擇文件以后，使用photoCompress方法對上傳的圖片進(jìn)行壓縮，photoCompress方法的第二個(gè)參數(shù)還可以傳入長寬等參數(shù)，具體可以看photoCompress這個(gè)方法，quality是用來設(shè)置壓縮后圖片質(zhì)量的，越小質(zhì)量越差，表現(xiàn)出來就是圖片越模糊，但是相應(yīng)的體積就越小。

最后使用formData.set(key,value,name)方法，將現(xiàn)有的name為file的表單元素的值改變。這個(gè)方法有三個(gè)參數(shù)，第一個(gè)是key值，也就是表單里對應(yīng)的元素的name值（如果不存在會(huì)自行添加），第二個(gè)值是value值，第三個(gè)是選填的值，如果第二個(gè)值為blob對象或者file對象，則第三個(gè)值表示文件名。