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