涉及到網頁圖片的交互，少不了圖片的壓縮上傳，相關的插件有很多，相信大家都有用過，這里我就推薦三款，至于好處就仁者見仁嘍：
1.名氣最高的WebUploader，由Baidu FEX 團隊開發，以H5為主，FLASH為輔，兼容 IE6+，iOS 6+, android 4+，采用大文件分片并發上傳，極大的提高了文件上傳效率，看了官方文檔就知道，能滿足你所需要的所有功能，一言以蔽之，大而全；至于缺點，大概就是插件體積太大了，自帶樣式文件，而且還要依賴jquery類庫。詳細的教程網上俯拾即是，這里我就附上一段簡單的demo：
<!Doctype html><html lang='en'><head> <meta charset='utf-8'/> <meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'/> <title>實驗</title> <style> *{ margin:0; padding:0; } .progress{ height:50px; background-color: red; } </style> <link rel="stylesheet" href="assets/webuploader.css" rel="external nofollow" ></head><body> <div class="myuploader"> <!--用來存放文件信息--> <div class="uploader-list"> </div> <!-- 放置按鈕 --> <div class="btns"> <div id="picker">選擇文件</div> <!-- <button class="send">開始上傳</button> --> </div> </div> <img src="" alt="" /> <div class="state"></div> <div class="progess"></div> <script src="assets/jquery-1.12.0.js"></script> <script src="assets/webuploader.html5only.min.js"></script> <script> // 初始化WebUploader var uploader = WebUploader.create({ // 選完文件后是否自動上傳 auto:true, // 文件接收的服務端路徑 server:'http://webuploader.duapp.com/server/fileupload.php', // 選擇文件的按鈕 pick:'#picker', // 只允許選擇圖片文件 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/jpg,image/jpeg,image/png' //如果寫成image/*會出現響應慢的問題 }, // 配置生成縮略圖的選項 thumb:{ // 縮略圖的寬高，當取值介于0-1時，被當成百分比使用 width:500, height:250, // 強制轉換成指定的類型 type:"image/jpeg", // 圖片質量，只有type為image/jpeg的時候才有效 quality:70, // 是否允許放大，如果想要生成小圖的時候不失真，此選項應該設置為false allowMagnify:true, // 是否允許裁剪 crop:true }, // 是否壓縮圖片, 默認如果是jpeg文件上傳前會壓縮，如果是false, 則圖片在上傳前不進行壓縮 compress:{ // 壓縮后的尺寸 width: 100, height: 100, // 圖片質量，只有type為image/jpeg的時候才有效。 quality: 90, // 是否允許放大，如果想要生成小圖的時候不失真，此選項應該設置為false allowMagnify: false, // 是否允許裁剪 crop: false, // 是否保留頭部meta信息 preserveHeaders: true, // 如果發現壓縮后文件大小比原來還大，則使用原來圖片，此屬性可能會影響圖片自動糾正功能 noCompressIfLarger: false, // 單位字節，如果圖片大小小于此值，不會采用壓縮 compressSize: 0 } }); // 監聽fileQueued事件來處理UI邏輯，當有一批文件被添加進隊列改用filesQueued uploader.on('fileQueued', function( file ) { // 可以在控制臺中查看file對象的詳細信息 console.log(file); // 創建縮略圖 makeThumb，還可以寫成(file,callback,width,height) uploader.makeThumb(file,function(error,src) { if (error) { console.log("不能預覽"); return; }else{ $("img").attr('src',src); } }); }); // 文件上傳開始 uploader.on('startUpload', function(file) { $(".state").text('開始'); }); // 文件上傳進度 uploader.on('uploadProgress', function(file,percentage) { $(".progress").css('width', percentage * 100 + "%" ); }); // 文件上傳成功 uploader.on('uploadSuccess', function(file) { console.log("成功"); $(".state").text('已上傳'); }); // 文件上傳失敗 uploader.on('uploadError', function(file) { console.log("失敗"); $(".state").text('上傳出錯'); // 獲取文件統計信息 console.log(uploader.getStats()); // console.log(uploader.getFiles('error')); }); // 文件上傳完成 uploader.on('uploadComplete', function(file) { console.log("完成"); $(".progress").fadeOut(); }); </script></body></html>2.移動端的插件，如果能脫離jquery，并且能滿足項目的基本需求就再好不過了，這里像localResizeIMG就做得不錯，它有4個歷史版本，建議引入最新穩定版本localResizeIMG4，demo如下（樣式要自己寫）：
<!Doctype html><html lang='en'><head> <meta charset='utf-8'/> <meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'/> <title>實驗</title> <style> *{ margin:0; padding:0; } </style></head><body> <!-- capture="camera"可以出現拍照；accept="image/*"僅接受圖片 --> <input type="file" id="file" name="logo" capture="camera" > <!-- 一般情況下引入lrz.bundle.js，但絕對不要刪除目錄下的*.chunk.js，這些文件分別對應了IOS和Android的兼容代碼，檢測到符合環境時會自動引入，lrz.all.bundle.js是包含了所有引用了，莫名其妙的問題下就引用這個吧 --> <script src="assets/lrz.bundle.js"></script> <script> // 通過change事件可以得到用戶選擇的圖片 document.querySelector("input").addEventListener("change",function(){ // this.files[0]就是用戶選擇的文件，當做參數傳入lrz(file, [options])，或者直接傳入圖片路徑 // [options]中的width表示圖片最大不超過的寬度，默認為原圖寬度，height不設時會適應寬度；quality表示圖片壓縮質量，取值 0 - 1，默認為0.7；fieldName表示后端接收的字段名，默認為 file lrz(this.files[0], {width: 1024}) // 上述返回值是一個promise對象，后面可以接then(rst) catch(err) always() .then(function(rst){ // 通過圖片的預加載來實現圖片預覽 var img = new Image();// 創建一個Image對象 // 先綁定onload事件，然后再給src賦值，原因好像是為了解決ie，opera下的兼容問題 // 圖片加載完畢時異步調用 img.onload = function () { console.log("圖片加載完畢") img.onload = null; // 解決內存泄漏，同時避免動態圖片的事件多次觸發 document.body.appendChild(img); }; img.src = rst.base64;// 載入生成后的圖片base64 // 返回rst便于鏈式調用 return rst; }) .then(function(rst){ // 除了以上的內容，rst.formData表示后端可處理的數據；rst.file表示壓縮后的對象；rst.fileLen表示生成后的圖片大小；rst.base64Len表示生成后的base的大小；rst.origin表示原始的對象，包括大小，日期等信息 console.log(rst.formData) //可以在這里寫ajax的上傳代碼，原生和jquery的都可以 // 返回rst便于鏈式調用 return rst; }) .catch(function(err){ // 萬一出錯了，這里可以捕捉到錯誤信息，而且以上的then都不會執行 alert(err); }) .always(function(){ // 不管是成功失敗，這里都會執行 console.log("執行完成") }) }) </script></body></html>3.以上兩款優缺點一目了然，本人公司用的是LUploader，純原生js寫的，不依賴任何類庫，壓縮后的js文件只有5k，實現圖片壓縮上傳只需三步：
(1)在html頁面中引入input標簽，通過自定義屬性data-LUploader綁定點擊觸發的標簽id：
<div class="LUploader" id="demo1"> <div class="LUploader-container"> <input data-LUploader='demo1' data-form-file='basestr' data-upload-type='front' type="file" /> <ul class="LUploader-list"></ul> </div> <div> <div class="icon"></div> <p>單擊上傳</p> </div></div>
(2)將樣式文件和js文件引入到頁面中：
<link rel="stylesheet" href="css/LUploader.css" rel="external nofollow" ><script src="js/LUploader.js"></script>
(3)js腳本中初始化插件：
new LUploader(這里放需要綁定的input對象作為參數, { url: '',//post請求地址 multiple: false,//是否一次上傳多個文件 默認false maxsize: 102400,//忽略壓縮操作的文件體積上限 默認100kb accept: 'image/jpg,image/jpeg,image/png',//如果寫成image/*會出現響應慢的問題 quality: 0.1,//壓縮比 默認0.1 范圍0.1-1.0 越小壓縮率越大 showsize:false//是否顯示原始文件大小 默認false});以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
