小編給大家分享一下JS移動(dòng)端/H5同時(shí)選擇多張圖片上傳并使用canvas壓縮圖片的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、涼城網(wǎng)絡(luò)推廣、重慶小程序開發(fā)、涼城網(wǎng)絡(luò)營銷、涼城企業(yè)策劃、涼城品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等,從售前售中售后,我們都將竭誠為您服務(wù),您的肯定,是我們最大的嘉獎(jiǎng);創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供涼城建站搭建服務(wù),24小時(shí)服務(wù)熱線:18980820575,官方網(wǎng)址:www.cdcxhl.com
HTML5定義了 FileReader 作為文件 API 的重要成員用于讀取文件,根據(jù) W3C 的定義,F(xiàn)ileReader接口提供了讀取文件的方法和包含讀取結(jié)果的事件模型。
FileReader的實(shí)例擁有 4 個(gè)方法,其中 3 個(gè)用以讀取文件,另一個(gè)用來中斷讀取。下面的表格列出了這些方法以及他們的參數(shù)和功能,需要注意的是 ,無論讀取成功或失敗,方法并不會(huì)返回讀取結(jié)果,這一結(jié)果存儲(chǔ)在 result 屬性中。
方法名 | 參數(shù) | 描述 |
---|---|---|
abort | none | 中斷讀取 |
readAsBinaryString | file | 將文件讀取為二進(jìn)制碼 |
readAsDataURL | file | 將文件讀取為 DataURL |
readAsText | file, [encoding] | 將文件讀取為文本 |
readAsText:該方法有兩個(gè)參數(shù),其中第二個(gè)參數(shù)是文本的編碼方式,默認(rèn)值為 UTF-8。這個(gè)方法非常容易理解,將文件以文本方式讀取,讀取的結(jié)果即是這個(gè)文本文件中的內(nèi)容。
readAsBinaryString:該方法將文件讀取為二進(jìn)制字符串,通常我們將它傳送到后端,后端可以通過這段字符串存儲(chǔ)文件。
readAsDataURL:這是例子程序中用到的方法,該方法將文件讀取為一段以 data: 開頭的字符串,這段字符串的實(shí)質(zhì)就是 Data URL,Data URL是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件。
FileReader還包含了一套完整的事件模型,用于捕獲讀取文件時(shí)的狀態(tài),下面這個(gè)表格歸納了這些事件。
事件 | 描述 |
---|---|
onabort | 中斷時(shí)觸發(fā) |
onerror | 出錯(cuò)時(shí)觸發(fā) |
onload | 文件讀取成功完成時(shí)觸發(fā) |
onloadend | 讀取完成觸發(fā),無論成功或失敗 |
onloadstart | 讀取開始時(shí)觸發(fā) |
onprogress | 讀取中 |
文件一旦開始讀取,無論成功或失敗,實(shí)例的 result 屬性都會(huì)被填充。如果讀取失敗,則 result 的值為 null ,否則即是讀取的結(jié)果,絕大多數(shù)的程序都會(huì)在成功讀取文件的時(shí)候,抓取這個(gè)值。
了解了H5提供的 FileReader 后,我們就使用 FileReader 來實(shí)現(xiàn)同事選擇多張圖片并上傳。
首先,在 HTML 加入一個(gè)file表單,并設(shè)置其為 multiple(瀏覽器在對multiple、disabled、checked、selected等這類屬性進(jìn)行解析時(shí),只要這些屬性存在,默認(rèn)的就會(huì)被解析成true,甭管你設(shè)置的是disabled=true或者disabled=false亦或是disabled="",如果不想這些屬性起作用,唯有用js來remove掉這些屬性,除非你不設(shè)置這些屬性。),并設(shè)置accept="image/*"用以只能選擇圖片類型的文件,代碼如下:
接下來就到了js上場了:
//圖片上傳 var file = { upload: function (e) { var self = this; var files = e.target.files; var type = files[0].type.split('/')[0]; if (type != 'image') { alertMsg('請上傳圖片'); return; } //var size = Math.floor(file.size / 1024 / 1024); //if (size > 3) { // alert('圖片大小不得超過3M'); // return; //}; for (var i = 0; i < files.length; i++) { var reader = new FileReader(); reader.readAsDataURL(files[i]); reader.onloadstart = function () { //用以在上傳前加入一些事件或效果,如載入中...的動(dòng)畫效果 }; reader.onloadend = function (e) { var dataURL = this.result; var imaged = new Image(); imaged.src = dataURL; imaged.onload = function () { //利用canvas對圖片進(jìn)行壓縮 var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var w = 0; var h = 0; if (this.width > this.height) { h = 1000; var scale = this.width / this.height; h = h > this.height ? this.height : h; w = h * scale; } else { w = 1000; var scale = this.width / this.height; w = w > this.width ? this.width : w h = w / scale; } var anw = document.createAttribute("width"); var anh = document.createAttribute("height"); if (this.width > this.height) { anw.value = h; anh.value = w; } else { anw.value = w; anh.value = h; } canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); if (this.width > this.height) { ctx.translate(h, 0); ctx.rotate(90 * Math.PI / 180) ctx.drawImage(this, 0, 0, w, h); ctx.restore(); } else { ctx.drawImage(this, 0, 0, w, h); } dataURL = canvas.toDataURL('image/jpeg'); //回調(diào)函數(shù)用以向數(shù)據(jù)庫提交數(shù)據(jù) self.callback(dataURL); }; }; } }, event: function () { $("#upload").change(function (e) { file.upload(e); }); }, callback: function (dataURL) { $.ajaxSettings.async = false; //這里必須將ajax的異步改為同步才可以把返回并保存在隱藏域中的圖片地址取出同時(shí)加在地址欄中作為參數(shù)一并傳入下一個(gè)頁面,這樣做的目的是因?yàn)榉祷氐膱D片地址不是一個(gè)json數(shù)組,而是單個(gè)的json字符串,所以只能將返回的圖片地址json字符串拼接在一起作為參數(shù)傳到下一個(gè)頁面 $.post(url, dataURL, function (res) { //將base64圖片流的圖片通過后臺(tái)轉(zhuǎn)換成普通的圖片路徑并上傳至服務(wù)器 var imgUrl = $("#hiddenImgUrl").val(); if (res.success) { $(".loading").hide(); if (imgUrl != "") { $("#hiddenImgUrl").val(imgUrl + "|" + res.imgUrl); //中間加一個(gè) | 是為了到下一個(gè)頁面便于將傳過去的圖片地址參數(shù)轉(zhuǎn)換為數(shù)組 } else { $("#hiddenImgUrl").val(res.imgUrl); } var imgUrl = $("#hiddenImgUrl").val(); window.location.href = "apply.html?imgUrl=" + imgUrl; } else { alert(res.message); } }, "json"); }, init: function () { this.event(); } } file.init();
由于在通過post向服務(wù)器上傳時(shí)采用了同步的方式,所以我在寫項(xiàng)目的過程中,老是無法實(shí)現(xiàn)加載中的動(dòng)畫效果,并且把加載中的動(dòng)畫效果放在 reader.onloadstart方法中依舊不起作用,最后只能放在了$("#upload").change(function (e) {})方法中,代碼如下:
event: function () { $("#upload").change(function (e) { $(".loading").show(); file.upload(e); }); }
以上是同時(shí)上傳多張圖片并將圖片傳入下一個(gè)頁面繼續(xù)進(jìn)行后續(xù)操作,那么如何在同時(shí)上傳完多張圖片后在本頁再預(yù)覽這些圖片呢?其實(shí)方法也是很簡單的,上邊callback函數(shù)里邊的$.post的返回值里就包含了上傳至服務(wù)器后的圖片路徑,將這些路徑賦給img標(biāo)簽的src,然后再插入到頁面中就OK了,代碼如下:
callback: function (dataURL) { $.post(url, dataURL, function (res) { //將base64圖片流的圖片通過后臺(tái)轉(zhuǎn)換成普通的圖片路徑并上傳至服務(wù)器 if (res.success) { $(".loading").hide(); var result = ''; var div = document.createElement('div'); div.innerHTML = result; document.body.appendChild(div); } else { alert(res.message); } }, "json"); }
以上是“JS移動(dòng)端/H5同時(shí)選擇多張圖片上傳并使用canvas壓縮圖片的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!