您好,登錄后才能下訂單哦!
小編給大家分享一下AngularJS怎么實(shí)現(xiàn)圖片上傳和預(yù)覽功能的方法分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies,包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。
html5原生方法
先看一下html5原生方法上傳和預(yù)覽圖片的實(shí)現(xiàn):
// <img id="img-preview"> var imgPreview = document.getElementById("img-preview"); // <input id="img-input" type="file"> var imgInput= document.getElementById("img-input"); imgInput.addEventListener("change", function(e){ var imgFile = e.target.files[0]; // 獲取上傳的圖片 var reader = new FileReader(); reader.readAsDataURL(imgFile ); // 將圖片轉(zhuǎn)成dataUri reader.onload = function(e) { imgPreview.src = e.target.result; //更新圖片鏈接 } });
我們看到,需要用到onchange事件來獲得上傳的文件,當(dāng)項(xiàng)目使用上angularjs時,很自然的,我們想到了ng-change指令,然而不幸的是,在angularjs中,<input type="file">不支持ng-model和ng-change指令(附錄1),這就使得文件上傳變得有些復(fù)雜了。
angularjs方法
這里使用開源的 angular-file-upload 模塊來實(shí)現(xiàn),步驟如下:
1、安裝 angular-file-upload 模塊
bower install angular-file-upload --save
2、添加到應(yīng)用依賴
var app = angular.module('my-app', [ 'angularFileUpload' ]);
3、HTML代碼
<!--文件上傳指令--> <input type="file" nv-file-select="" uploader="uploader" /> <!--圖片預(yù)覽--> <img id="img-preview" ng-src="{{iconUrl}}">
這里,nv-file-select=""表示使用angular-file-upload模塊的文件選擇方式上傳,參考官方例子
4、controller代碼
.controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) { var uploader = $scope.uploader = new FileUploader({ url: 'upload.php' //換成自己的上傳地址,本地演示不換也行 }); uploader.onAfterAddingFile = function(fileItem) { var reader = new FileReader(); reader.addEventListener("load", function (e) { //文件加載完之后,更新angular綁定 $scope.$apply(function(){ $scope.iconUrl = e.target.result; }); }, false); reader.readAsDataURL(fileItem._file); }; }]);
可以看到,我們通過onAfterAddingFile回調(diào)函數(shù)獲得所選的圖片文件,接下來把圖片文件轉(zhuǎn)成datauri,再更新<img>標(biāo)簽的src屬性即可。
值得注意的是,我們把“更新<img>標(biāo)簽的src屬性”這個任務(wù)放到了$scope.$apply方法中執(zhí)行,這是因?yàn)樵赼ngular框架外部(如在瀏覽器DOM事件中, setTimeout, XHR 或者 第三方框架中)更新數(shù)據(jù),angular是不會同步更新綁定的。這點(diǎn)可以參考angular $apply reference
以上是“AngularJS怎么實(shí)現(xiàn)圖片上傳和預(yù)覽功能的方法分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。