<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        Angularjs實現上傳圖片預覽功能

        來源:懂視網 責編:小采 時間:2020-11-27 22:31:07
        文檔

        Angularjs實現上傳圖片預覽功能

        Angularjs實現上傳圖片預覽功能:廢話不多說了,直接給大家貼代碼了,具體代碼如下所示: <input type=file ng-file-select=onFileSelect($files) accept=image/*> app.factory(fileReader, function($q, $log) { var onLoad
        推薦度:
        導讀Angularjs實現上傳圖片預覽功能:廢話不多說了,直接給大家貼代碼了,具體代碼如下所示: <input type=file ng-file-select=onFileSelect($files) accept=image/*> app.factory(fileReader, function($q, $log) { var onLoad

        廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:

        <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
         };
         });

        選擇圖片后執行的方法

        $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);
         });
         }

        總結

        以上所述是小編給大家介紹的Angularjs實現上傳圖片預覽功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        Angularjs實現上傳圖片預覽功能

        Angularjs實現上傳圖片預覽功能:廢話不多說了,直接給大家貼代碼了,具體代碼如下所示: <input type=file ng-file-select=onFileSelect($files) accept=image/*> app.factory(fileReader, function($q, $log) { var onLoad
        推薦度:
        標簽: 圖片 上傳 實現
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 国产a不卡片精品免费观看 | 亚洲 小说区 图片区 都市| 两个人看的www高清免费观看| 日本免费在线中文字幕| 国产av无码专区亚洲av果冻传媒| 一级A毛片免费观看久久精品| 亚洲国产精品激情在线观看| 一区免费在线观看| 久久久无码精品亚洲日韩软件 | 亚洲精品欧洲精品| 免费在线视频你懂的| 亚洲国产精品自在拍在线播放| 美女又黄又免费的视频| 亚洲人成色77777在线观看大| 亚洲伊人色一综合网| 91免费精品国自产拍在线不卡| 精品国产成人亚洲午夜福利| 国产精品极品美女免费观看| 美女隐私免费视频看| 亚洲精品亚洲人成人网| 99国产精品免费视频观看| 亚洲日韩国产成网在线观看| 免费无码又爽又刺激网站直播| 亚洲免费在线播放| 成年女人免费v片| 一本岛v免费不卡一二三区| 久久精品国产精品亚洲蜜月| 波多野结衣免费在线观看| 亚洲成AV人片一区二区| 亚洲成人在线免费观看| 亚洲AV色欲色欲WWW| 亚洲区日韩区无码区| 91香蕉国产线在线观看免费| 中文字幕 亚洲 有码 在线| 亚洲精品成人网久久久久久| 91精品全国免费观看含羞草| 亚洲AV永久无码天堂影院| 亚洲毛片αv无线播放一区| 91在线视频免费91| 精品熟女少妇aⅴ免费久久 | 亚洲综合国产精品|