推薦三款不錯(cuò)的圖片壓縮上傳插件(webuploader、localResizeIMG4、LUploader)
涉及到網(wǎng)頁(yè)圖片的交互,少不了圖片的壓縮上傳,相關(guān)的插件有很多,相信大家都有用過(guò),這里我就推薦三款,至于好處就仁者見(jiàn)仁嘍:
1.名氣最高的WebUploader,由Baidu FEX 團(tuán)隊(duì)開發(fā),以H5為主,F(xiàn)LASH為輔,兼容 IE6+,iOS 6+, android 4+,采用大文件分片并發(fā)上傳,極大的提高了文件上傳效率,看了官方文檔就知道,能滿足你所需要的所有功能,一言以蔽之,大而全;至于缺點(diǎn),大概就是插件體積太大了,自帶樣式文件,而且還要依賴jquery類庫(kù)。詳細(xì)的教程網(wǎng)上俯拾即是,這里我就附上一段簡(jiǎn)單的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>實(shí)驗(yàn)</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"> <!--用來(lái)存放文件信息--> <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({ // 選完文件后是否自動(dòng)上傳 auto:true, // 文件接收的服務(wù)端路徑 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/*會(huì)出現(xiàn)響應(yīng)慢的問(wèn)題 }, // 配置生成縮略圖的選項(xiàng) thumb:{ // 縮略圖的寬高,當(dāng)取值介于0-1時(shí),被當(dāng)成百分比使用 width:500, height:250, // 強(qiáng)制轉(zhuǎn)換成指定的類型 type:"image/jpeg", // 圖片質(zhì)量,只有type為image/jpeg的時(shí)候才有效 quality:70, // 是否允許放大,如果想要生成小圖的時(shí)候不失真,此選項(xiàng)應(yīng)該設(shè)置為false allowMagnify:true, // 是否允許裁剪 crop:true }, // 是否壓縮圖片, 默認(rèn)如果是jpeg文件上傳前會(huì)壓縮,如果是false, 則圖片在上傳前不進(jìn)行壓縮 compress:{ // 壓縮后的尺寸 width: 100, height: 100, // 圖片質(zhì)量,只有type為image/jpeg的時(shí)候才有效。 quality: 90, // 是否允許放大,如果想要生成小圖的時(shí)候不失真,此選項(xiàng)應(yīng)該設(shè)置為false allowMagnify: false, // 是否允許裁剪 crop: false, // 是否保留頭部meta信息 preserveHeaders: true, // 如果發(fā)現(xiàn)壓縮后文件大小比原來(lái)還大,則使用原來(lái)圖片,此屬性可能會(huì)影響圖片自動(dòng)糾正功能 noCompressIfLarger: false, // 單位字節(jié),如果圖片大小小于此值,不會(huì)采用壓縮 compressSize: 0 } }); // 監(jiān)聽fileQueued事件來(lái)處理UI邏輯,當(dāng)有一批文件被添加進(jìn)隊(duì)列改用filesQueued uploader.on('fileQueued', function( file ) { // 可以在控制臺(tái)中查看file對(duì)象的詳細(xì)信息 console.log(file); // 創(chuàng)建縮略圖 makeThumb,還可以寫成(file,callback,width,height) uploader.makeThumb(file,function(error,src) { if (error) { console.log("不能預(yù)覽"); return; }else{ $("img").attr('src',src); } }); }); // 文件上傳開始 uploader.on('startUpload', function(file) { $(".state").text('開始'); }); // 文件上傳進(jìn)度 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('上傳出錯(cuò)'); // 獲取文件統(tǒng)計(jì)信息 console.log(uploader.getStats()); // console.log(uploader.getFiles('error')); }); // 文件上傳完成 uploader.on('uploadComplete', function(file) { console.log("完成"); $(".progress").fadeOut(); }); </script> </body> </html>
2.移動(dòng)端的插件,如果能脫離jquery,并且能滿足項(xiàng)目的基本需求就再好不過(guò)了,這里像localResizeIMG就做得不錯(cuò),它有4個(gè)歷史版本,建議引入最新穩(wěn)定版本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>實(shí)驗(yàn)</title> <style> *{ margin:0; padding:0; } </style> </head> <body> <!-- capture="camera"可以出現(xiàn)拍照;accept="image/*"僅接受圖片 --> <input type="file" id="file" name="logo" capture="camera" > <!-- 一般情況下引入lrz.bundle.js,但絕對(duì)不要?jiǎng)h除目錄下的*.chunk.js,這些文件分別對(duì)應(yīng)了IOS和Android的兼容代碼,檢測(cè)到符合環(huán)境時(shí)會(huì)自動(dòng)引入,lrz.all.bundle.js是包含了所有引用了,莫名其妙的問(wèn)題下就引用這個(gè)吧 --> <script src="assets/lrz.bundle.js"></script> <script> // 通過(guò)change事件可以得到用戶選擇的圖片 document.querySelector("input").addEventListener("change",function(){ // this.files[0]就是用戶選擇的文件,當(dāng)做參數(shù)傳入lrz(file, [options]),或者直接傳入圖片路徑 // [options]中的width表示圖片最大不超過(guò)的寬度,默認(rèn)為原圖寬度,height不設(shè)時(shí)會(huì)適應(yīng)寬度;quality表示圖片壓縮質(zhì)量,取值 0 - 1,默認(rèn)為0.7;fieldName表示后端接收的字段名,默認(rèn)為 file lrz(this.files[0], {width: 1024}) // 上述返回值是一個(gè)promise對(duì)象,后面可以接then(rst) catch(err) always() .then(function(rst){ // 通過(guò)圖片的預(yù)加載來(lái)實(shí)現(xiàn)圖片預(yù)覽 var img = new Image();// 創(chuàng)建一個(gè)Image對(duì)象 // 先綁定onload事件,然后再給src賦值,原因好像是為了解決ie,opera下的兼容問(wèn)題 // 圖片加載完畢時(shí)異步調(diào)用 img.onload = function () { console.log("圖片加載完畢") img.onload = null; // 解決內(nèi)存泄漏,同時(shí)避免動(dòng)態(tài)圖片的事件多次觸發(fā) document.body.appendChild(img); }; img.src = rst.base64;// 載入生成后的圖片base64 // 返回rst便于鏈?zhǔn)秸{(diào)用 return rst; }) .then(function(rst){ // 除了以上的內(nèi)容,rst.formData表示后端可處理的數(shù)據(jù);rst.file表示壓縮后的對(duì)象;rst.fileLen表示生成后的圖片大??;rst.base64Len表示生成后的base的大??;rst.origin表示原始的對(duì)象,包括大小,日期等信息 console.log(rst.formData) //可以在這里寫ajax的上傳代碼,原生和jquery的都可以 // 返回rst便于鏈?zhǔn)秸{(diào)用 return rst; }) .catch(function(err){ // 萬(wàn)一出錯(cuò)了,這里可以捕捉到錯(cuò)誤信息,而且以上的then都不會(huì)執(zhí)行 alert(err); }) .always(function(){ // 不管是成功失敗,這里都會(huì)執(zhí)行 console.log("執(zhí)行完成") }) }) </script> </body> </html>
3.以上兩款優(yōu)缺點(diǎn)一目了然,本人公司用的是LUploader,純?cè)鷍s寫的,不依賴任何類庫(kù),壓縮后的js文件只有5k,實(shí)現(xiàn)圖片壓縮上傳只需三步:
(1)在html頁(yè)面中引入input標(biāo)簽,通過(guò)自定義屬性data-LUploader綁定點(diǎn)擊觸發(fā)的標(biāo)簽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文件引入到頁(yè)面中:
<link rel="stylesheet" href="css/LUploader.css" rel="external nofollow" > <script src="js/LUploader.js"></script>
(3)js腳本中初始化插件:
new LUploader(這里放需要綁定的input對(duì)象作為參數(shù), { url: '',//post請(qǐng)求地址 multiple: false,//是否一次上傳多個(gè)文件 默認(rèn)false maxsize: 102400,//忽略壓縮操作的文件體積上限 默認(rèn)100kb accept: 'image/jpg,image/jpeg,image/png',//如果寫成image/*會(huì)出現(xiàn)響應(yīng)慢的問(wèn)題 quality: 0.1,//壓縮比 默認(rèn)0.1 范圍0.1-1.0 越小壓縮率越大 showsize:false//是否顯示原始文件大小 默認(rèn)false });
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 關(guān)于webuploader插件使用過(guò)程遇到的小問(wèn)題
- 百度多文件異步上傳控件webuploader基本用法解析
- 使用WebUploader實(shí)現(xiàn)上傳文件功能(一)
- 快速掌握jQuery插件WebUploader文件上傳
- webuploader 實(shí)現(xiàn)圖片批量上傳功能附實(shí)例代碼
- webuploader實(shí)現(xiàn)上傳圖片到服務(wù)器功能
- webuploader模態(tài)框ueditor顯示問(wèn)題解決方法
- 使用WebUploader實(shí)現(xiàn)分片斷點(diǎn)上傳文件功能(二)
- webuploader分片上傳的實(shí)現(xiàn)代碼(前后端分離)
- php + WebUploader實(shí)現(xiàn)圖片批量上傳功能
相關(guān)文章
JavaScript DOM節(jié)點(diǎn)添加示例
本節(jié)為大家介紹下JavaScript DOM節(jié)點(diǎn)添加,將node里面的str放到h1段落中使之成為h1的新段落2014-07-07所見(jiàn)即所得的富文本編輯器bootstrap-wysiwyg使用方法詳解
這篇文章主要為大家分享一款所見(jiàn)即所得的富文本編輯器bootstrap-wysiwyg,并詳細(xì)告訴大家文本編輯器bootstrap-wysiwyg的使用方法,感興趣的小伙伴們可以參考一下2016-05-05js實(shí)現(xiàn)簡(jiǎn)單音樂(lè)播放器
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單音樂(lè)播放器,可拖動(dòng)進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06js利用數(shù)組length屬性清空和截短數(shù)組的小例子
這篇文章主要介紹了js利用數(shù)組length屬性清空和截短數(shù)組的小例子,有需要的朋友可以參考一下2014-01-01vue 自定義指令directive的使用場(chǎng)景
這篇文章主要詳細(xì)介紹了vue 自定義指令directive的使用場(chǎng)景,文中有詳細(xì)的代碼示例,感興趣的小伙伴歡迎閱讀2023-04-04前端開發(fā)之JS生成32位隨機(jī)數(shù)的方法舉例
最近有個(gè)需求,是需要生成32位長(zhǎng)度的隨機(jī)數(shù),下面這篇文章主要給大家介紹了關(guān)于前端開發(fā)之JS生成32位隨機(jī)數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01js處理層級(jí)數(shù)據(jù)結(jié)構(gòu)的方法小結(jié)
本文主要介紹了js處理層級(jí)數(shù)據(jù)結(jié)構(gòu)的方法。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01