欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用js在layui中實現(xiàn)上傳圖片壓縮

 更新時間:2019年06月18日 10:06:45   投稿:newname  
這篇文章主要介紹了使用js在layui中實現(xiàn)上傳圖片壓縮,layui 是一款采用自身模塊規(guī)范編寫的前端 UI 框架,js上傳圖片壓縮百度有很多方法,,需要的朋友可以參考下

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

function photoCompress(file, w, objDiv) {
var ready = new FileReader();
/*開始讀取指定的Blob對象或File對象中的內(nèi)容. 當(dāng)讀取操作完成時,readyState屬性的值會成為DONE,如果設(shè)置了onloadend事件處理程序,則調(diào)用之.同時,result屬性中將包含一個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
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 創(chuàng)建屬性節(jié)點
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方法進行壓縮,最后生成一個Blob對象。

注:因為牽扯到canvas,所以低版本瀏覽器應(yīng)該是不支持的吧(有待考證)

二、圖片壓縮的方法有了,怎么使用呢?怎么上傳到后臺呢?往下看!

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方法對上傳的圖片進行壓縮,photoCompress方法的第二個參數(shù)還可以傳入長寬等參數(shù),具體可以看photoCompress這個方法,quality是用來設(shè)置壓縮后圖片質(zhì)量的,越小質(zhì)量越差,表現(xiàn)出來就是圖片越模糊,但是相應(yīng)的體積就越小。

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

當(dāng)然,如果你不想用form表單提交,你也可以用ajax提交的方法:

html:   

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

有些許的變化,form沒有了action,上傳的按鈕type改為了button

js部分給按鈕添加一個點擊事件,其他也沒有變化,不做過多贅述:

$("#uploadBtn").click(function () {
var formData = new formData("form");
$.ajax({
type:"post",
url:"",
async:true,
data:formData,
success:function (data) {
},
error:function (e) {
}
});
});

三、結(jié)合layui踩的一些坑,以及最終的解決方法。

先看html部分:

<button type="button" class="layui-btn" id="upImg">上傳圖片</button>
<div id="img_list">
</div>
<input type="button" id = "btnHide" class="none">

就是這么簡單。為什么要再寫一個隱藏的按鈕,之后解釋。

js部分:

layui.use('upload', function() {
var upload = layui.upload;
var uploadInst = upload.render({
elem: '#upImg',
url: '/upload/',
auto: false,
bindAction: "#btnHide",
choose: function(obj) {
var files = obj.pushFile();
var index, file, indexArr = [];
for(index in files) {
indexArr.push(index);
};
var iaLen = indexArr.length;
file = files[indexArr[iaLen - 1]];
for(var i = 0; i < iaLen - 1; i++) {
delete files[indexArr[i]];
}
try {
if(file.size > 200 * 1024) {
delete files[index];
photoCompress(file, {
quality: 0.5,
}, function(base64Codes) {
var bl = convertBase64UrlToBlob(base64Codes);
obj.resetFile(index, bl, file.name);
$("#btnHide").trigger("click");
});
} else {
$("#btnHide").trigger("click");
}
} catch(e) {
$("#btnHide").trigger("click");
}
},
done: function(res) {
//這里把后臺返回的數(shù)據(jù)進行操作,展示上傳完成的圖片,具體數(shù)據(jù)格式參考layui的API
},
error: function() {
}
});
});

原理:在選擇照片之后,獲取文件,轉(zhuǎn)換為blob對象,使用resetFile方法對文件列隊里的文件進行重新設(shè)置,然后再觸發(fā)上傳事件。

踩的坑:

1、resetFile這個方法是layui 2.3.0 新增的,所以首先要確保layui的版本是最新的。

2、我把auto設(shè)置為false,點擊btnHide時觸發(fā)上傳,我也試過自動上傳,自動上傳的話,這些操作的代碼就要寫在before方法中(具體看layui的API),然而我發(fā)現(xiàn)自動上傳修改文件列隊的方法總是在上傳成功之后才調(diào)用,這就導(dǎo)致實際上傳的圖片其實沒有壓縮,至于為什么是這個執(zhí)行順序我隱約覺得是不是圖片轉(zhuǎn)碼,放入canvas的時候耽誤了……具體原因我不明白,所以我用手動上傳,確認(rèn)修改了文件列隊,再手動觸發(fā)上傳。

3、關(guān)于文件列隊,多次上傳文件,文件列隊也就是obj.pushFile()返回的是多個文件的對象,而且這些文件對象的key還是一串隨機數(shù)……所以我的思路是上傳一次,就用delete方法刪除隊列中已上傳過的文件。至于為什么不直接全部清空,因為考慮到不需要壓縮的情況,如果全部清空,不壓縮,就沒有執(zhí)行resetFile方法,文件列隊里就沒有文件,會報錯。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 小程序?qū)崿F(xiàn)簡單的計算器

    小程序?qū)崿F(xiàn)簡單的計算器

    這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)簡單的計算器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-07-07
  • javascript中parseInt()函數(shù)的定義和用法分析

    javascript中parseInt()函數(shù)的定義和用法分析

    這篇文章主要介紹了javascript中parseInt()函數(shù)的定義和用法,較為詳細的分析了parseInt()函數(shù)的定義及具體用法,以及參數(shù)使用時的注意事項,需要的朋友可以參考下
    2014-12-12
  • js實現(xiàn)時間日期校驗

    js實現(xiàn)時間日期校驗

    這篇文章主要為大家詳細介紹了js實現(xiàn)時間日期校驗,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-05-05
  • BooStrap對導(dǎo)航條的改造實踐小結(jié)

    BooStrap對導(dǎo)航條的改造實踐小結(jié)

    這篇文章主要介紹了BooStrap對導(dǎo)航條的改造實踐小結(jié)的相關(guān)資料,本文分步驟介紹的非常詳細,具有參考借鑒價值,需要的朋友可以參考下
    2016-09-09
  • 淺談js中對象的使用

    淺談js中對象的使用

    下面小編就為大家?guī)硪黄獪\談js中對象的使用。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08
  • 淺析Js中的單引號與雙引號問題

    淺析Js中的單引號與雙引號問題

    本文是對Js中單引號與雙引號的使用進行了總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2013-11-11
  • js實現(xiàn)卡片式項目管理界面UI設(shè)計效果

    js實現(xiàn)卡片式項目管理界面UI設(shè)計效果

    這篇文章主要介紹了js實現(xiàn)卡片式項目管理界面UI設(shè)計效果,該UI設(shè)計中,將各個項目以卡片的方式堆疊排列在屏幕上,當(dāng)點擊了其中的某個項目的時候,該項目圖片會全屏放大,向下滾動鼠標(biāo)可以看到該項目的介紹信息,需要的朋友可以參考下
    2015-12-12
  • 基于JavaScript+HTML編寫一個日期選擇插件

    基于JavaScript+HTML編寫一個日期選擇插件

    在現(xiàn)代Web應(yīng)用程序中,日期選擇器是一個非常常見的組件,用戶可以使用它來選擇特定的日期,在本篇文章中,我們將使用JavaScript和HTML來創(chuàng)建一個簡單但功能強大的日期選擇插件,這個日期選擇插件是比較考驗Js基本功的,需要的朋友可以參考下
    2023-10-10
  • JS學(xué)習(xí)筆記之原型鏈和利用原型實現(xiàn)繼承詳解

    JS學(xué)習(xí)筆記之原型鏈和利用原型實現(xiàn)繼承詳解

    這篇文章主要介紹了JS學(xué)習(xí)筆記之原型鏈和利用原型實現(xiàn)繼承,結(jié)合實例形式詳細分析了javascript原型鏈以及利用原型實現(xiàn)繼承的相關(guān)操作技巧與注意事項,需要的朋友可以參考下
    2019-05-05
  • javascript開發(fā)隨筆一 preventDefault的必要

    javascript開發(fā)隨筆一 preventDefault的必要

    給a做按鈕的click事件加preventDefault阻止瀏覽器的默認(rèn)行為貌似是印象中必須的事情
    2011-11-11

最新評論