angularjs客戶端實(shí)現(xiàn)壓縮圖片文件并上傳實(shí)例
主要是利用html5的canvas來進(jìn)行圖片的壓縮,然后轉(zhuǎn)化為dataURL,再有dataURL轉(zhuǎn)化為Blob文件,Blob對(duì)象可以直接賦值給Formdata.
app.service('Util', function($q) { var dataURItoBlob = function(dataURI) { // convert base64/URLEncoded data component to raw binary data held in a string var byteString; if (dataURI.split(',')[0].indexOf('base64') >= 0) byteString = atob(dataURI.split(',')[1]); else byteString = unescape(dataURI.split(',')[1]); // separate out the mime component var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // write the bytes of the string to a typed array var ia = new Uint8Array(byteString.length); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia], { type: mimeString }); }; var resizeFile = function(file) { var deferred = $q.defer(); var img = document.createElement("img"); try { var reader = new FileReader(); reader.onload = function(e) { img.src = e.target.result; //resize the image using canvas var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); var MAX_WIDTH = 800; var MAX_HEIGHT = 800; var width = img.width; var height = img.height; if (width > height) { if (width > MAX_WIDTH) { height *= MAX_WIDTH / width; width = MAX_WIDTH; } } else { if (height > MAX_HEIGHT) { width *= MAX_HEIGHT / height; height = MAX_HEIGHT; } } canvas.width = width; canvas.height = height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, width, height); //change the dataUrl to blob data for uploading to server var dataURL = canvas.toDataURL('image/jpeg'); var blob = dataURItoBlob(dataURL); deferred.resolve(blob); }; reader.readAsDataURL(file); } catch (e) { deferred.resolve(e); } return deferred.promise; }; return { resizeFile: resizeFile }; });
由于目前angualrjs暫不支持通過multiform data上傳文件,所以利用如下的代碼可以上傳formdata里的文件
app.controller('CompanyCtrl', function($http, Util) { Util.resizeFile(input.files[0]).then(function(blob_data) { var fd = new FormData(); fd.append("imageFile", blob_data); $http.post('http://your.domain.com/upload', fd, { headers: {'Content-Type': undefined }, transformRequest: angular.identity }) .success(function(data) { $scope.model.company_pict = data[0]; }) .error(function() { console.log("uploaded error...") }); }, function(err_reason) { console.log(err_reason); }); }
相關(guān)文章
用AngularJS的指令實(shí)現(xiàn)tabs切換效果
這篇文章介紹的是寫一個(gè)通過指令嵌套實(shí)現(xiàn)tabs功能的指令模塊,這也是我在一個(gè)項(xiàng)目中應(yīng)用到的,現(xiàn)在分享給大家,有需要的可以參考借鑒。2016-08-08Angularjs實(shí)現(xiàn)控制器之間通信方式實(shí)例總結(jié)
這篇文章主要介紹了Angularjs實(shí)現(xiàn)控制器之間通信方式,結(jié)合實(shí)例形式總結(jié)分析了AngularJS控制器常用通信方式及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-03-03AngularJS 路由詳解和簡(jiǎn)單實(shí)例
本文主要介紹AngularJS 路由,這里整理了相關(guān)資料進(jìn)行詳細(xì)介紹,并附實(shí)例代碼和實(shí)現(xiàn)效果圖,有需要的小伙伴可以參考下2016-07-07Angularjs Ng_repeat中實(shí)現(xiàn)復(fù)選框選中并顯示不同的樣式方法
今天小編就為大家分享一篇Angularjs Ng_repeat中實(shí)現(xiàn)復(fù)選框選中并顯示不同的樣式方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09AngularJS使用ocLazyLoad實(shí)現(xiàn)js延遲加載
這篇文章主要介紹了AngularJS使用ocLazyLoad實(shí)現(xiàn)js延遲加載的相關(guān)資料,需要的朋友可以參考下2017-07-07Angular.Js中過濾器filter與自定義過濾器filter實(shí)例詳解
Angularjs過濾器是 angularjs非常棒的特性之一。有朝一日,你可能需要使用自定義過濾器,所以下面這篇文章主要給大家介紹了Angular.Js中過濾器filter與自定義過濾器filter的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-05-05