Angularjs實(shí)現(xiàn)上傳圖片預(yù)覽功能
廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:
<input type="file" ng-file-select="onFileSelect($files)" accept="image/*"> app.factory("fileReader", function($q, $log) { var onLoad = function(reader, deferred, scope) { return function () { scope.$apply(function () { deferred.resolve(reader.result); }); }; }; var onError = function (reader, deferred, scope) { return function () { scope.$apply(function () { deferred.reject(reader.result); }); }; }; var onProgress = function(reader, scope) { return function (event) { scope.$broadcast("fileProgress", { total: event.total, loaded: event.loaded }); }; }; var getReader = function(deferred, scope) { var reader = new FileReader(); reader.onload = onLoad(reader, deferred, scope); reader.onerror = onError(reader, deferred, scope); reader.onprogress = onProgress(reader, scope); return reader; }; var readAsDataURL = function (file, scope) { var deferred = $q.defer(); var reader = getReader(deferred, scope); reader.readAsDataURL(file); return deferred.promise; }; return { readAsDataUrl: readAsDataURL }; });
選擇圖片后執(zhí)行的方法
$scope.onFileSelect = function(files) { var fileIn=files[0]; var img = new Image(); var fileType = fileIn.name.substring(fileIn.name.lastIndexOf(".") + 1, fileIn.name.length); if(fileIn.size>5242880){//單位是B,此處不允許超過5M alert("圖片不能超過5M") return; } if(fileType=='JPG' || fileType=='PNG' || fileType=='JPEG ' || fileType=='jpg' || fileType=='png' || fileType=='jpeg'){ }else{ alert("圖片格式只支持:JPG,PNG,JPEG") return; } fileReader.readAsDataUrl(fileIn, $scope) .then(function(result) { $scope.imageSrc = result; console.log(img.width); }); }
總結(jié)
以上所述是小編給大家介紹的Angularjs實(shí)現(xiàn)上傳圖片預(yù)覽功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- AngularJS實(shí)現(xiàn)圖片上傳和預(yù)覽功能的方法分析
- angularjs點(diǎn)擊圖片放大實(shí)現(xiàn)上傳圖片預(yù)覽
- angularjs實(shí)現(xiàn)多張圖片上傳并預(yù)覽功能
- AngularJs上傳前預(yù)覽圖片的實(shí)例代碼
- 學(xué)習(xí)使用AngularJS文件上傳控件
- angularjs客戶端實(shí)現(xiàn)壓縮圖片文件并上傳實(shí)例
- AngularJS 文件上傳控件 ng-file-upload詳解
- 通過AngularJS實(shí)現(xiàn)圖片上傳及縮略圖展示示例
- SpringMvc+Angularjs 實(shí)現(xiàn)多文件批量上傳
- Angularjs實(shí)現(xiàn)多圖片上傳預(yù)覽功能
相關(guān)文章
angularjs使用div模擬textarea文本框的方法
今天小編就為大家分享一篇angularjs使用div模擬textarea文本框的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-10-10關(guān)于AngularJs數(shù)據(jù)的本地存儲(chǔ)詳解
本文主要介紹了每一個(gè)獨(dú)立的JS文件或者不同的控制器如何實(shí)現(xiàn)數(shù)據(jù)的共享與交互的方法。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01Angularjs 實(shí)現(xiàn)一個(gè)幻燈片示例代碼
本文主要介紹Angularjs 寫一個(gè)幻燈片的知識(shí),這里整理了詳細(xì)的資料,及實(shí)現(xiàn)代碼和實(shí)現(xiàn)效果圖有需要的小伙伴可以參考下2016-09-09解決Angular.js中使用Swiper插件不能滑動(dòng)的問題
下面小編就為大家分享一篇解決Angular.js中使用Swiper插件不能滑動(dòng)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-02-02AngularJS ng-repeat指令及Ajax的應(yīng)用實(shí)例分析
這篇文章主要介紹了AngularJS ng-repeat指令及Ajax的應(yīng)用,結(jié)合實(shí)例形式分析了ng-repeat指令的功能及ajax請(qǐng)求交互相關(guān)操作技巧,需要的朋友可以參考下2017-07-07利用angular自動(dòng)編譯andriod APK的繞坑經(jīng)歷分享
這篇文章主要給大家介紹了關(guān)于如何利用angular自動(dòng)編譯andriod APK的繞坑經(jīng)歷,文中通過示例代碼以及圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者使用angular具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03AngularJS 如何在控制臺(tái)進(jìn)行錯(cuò)誤調(diào)試
本文主要介紹AngularJS 如何在控制臺(tái)進(jìn)行錯(cuò)誤調(diào)試,還不錯(cuò),分享給大家,希望給大家做一個(gè)參考。2016-06-06如何在Angular8.0下使用ngx-translate進(jìn)行國(guó)際化配置
這篇文章主要介紹了如何在Angular8.0下使用ngx-translate進(jìn)行國(guó)際化配置,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07