<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+Ionic實現移動端圖片上傳功能

        來源:懂視網 責編:小采 時間:2020-11-27 19:54:24
        文檔

        angularJS+Ionic實現移動端圖片上傳功能

        angularJS+Ionic實現移動端圖片上傳功能:這次給大家帶來angularJS+Ionic實現移動端圖片上傳功能,angularJS+Ionic實現移動端圖片上傳功能的注意事項有哪些,下面就是實戰案例,一起來看一下。前端開發中經常會碰到圖片上傳的問題,網上的解決辦法很多,可是有些圖片上傳的插件會有一些附屬的插件,因
        推薦度:
        導讀angularJS+Ionic實現移動端圖片上傳功能:這次給大家帶來angularJS+Ionic實現移動端圖片上傳功能,angularJS+Ionic實現移動端圖片上傳功能的注意事項有哪些,下面就是實戰案例,一起來看一下。前端開發中經常會碰到圖片上傳的問題,網上的解決辦法很多,可是有些圖片上傳的插件會有一些附屬的插件,因

        這次給大家帶來angularJS+Ionic實現移動端圖片上傳功能,angularJS+Ionic實現移動端圖片上傳功能的注意事項有哪些,下面就是實戰案例,一起來看一下。

        前端開發中經常會碰到圖片上傳的問題,網上的解決辦法很多,可是有些圖片上傳的插件會有一些附屬的插件,因此因為一個圖片上傳的問題可能額需要引入其他插件到項目中,久而久之項目會不倫不類,有時候插件之間也會有一些沖突,所以我們可以自己寫一個圖片上傳的方法。

        今天的demo是幫朋友做的一個移動端微信公眾號項目,項目架構采用angular+ionic,因為對dom的操作jQuery會方便很多,但是jQuery比較厚重,所以最后選擇用輕量級的zepto來對項目dom進行操作。

        項目中有一個需求是上傳個人作品,實現功能需要H5新對象 FormData對象、XMLHttpRequest對象、FileReader對象。只需要這三個對象即可,話不多說上代碼。

        function1:

        $scope.imgList = [];
        $scope.setUploader = function () {
         var files = document.getElementById('photo');
         files.click();
         $(files).unbind().on('change',function (e) {
         var file = e.target.value;
         if (!/.(jpg|jpeg|png|GIF|JPG|png)$/.test(file)) {
         common.toast('圖片類型必須是jpeg,jpg,png中的一種');
         return false;
         };
         fsubmit();
         readAsBinaryString();
         });
        };

        function2:

        function fsubmit() {
         var itemImg = {};
         var form=document.getElementById("form1");
         console.log('form',form)
         var formData=new FormData(form);
         formData.append('wxdesigner_sid',$.fn.cookie('wxdesigner_sid'));
         formData.append('id',$scope.masterInfo.id);
         formData.append('pc','1');
         var oReq = new XMLHttpRequest();
         oReq.onreadystatechange=function(){
         if(oReq.readyState==4){
         if(oReq.status==200){
         var json=JSON.parse(oReq.responseText);
         console.log(json)
         if(json.Success) {
         itemImg = json.Data;
         $scope.imgList=itemImg;
         console.log($scope.imgList)
         $scope.$apply();
         itemImg = {};
         }
         }
         }
         };
         console.log(oReq)
         console.log(formData)
         oReq.open("POST", common.api+"Wxdesigner/Designer/uploadworks");
         oReq.send(formData);
         return false;
        };
        //判斷瀏覽器是否支持FileReader接口
        if(typeof FileReader == 'undefined'){
         //使選擇控件不可操作
         file.setAttribute("disabled","disabled");
        }

        function3:

        function readAsBinaryString(){
         var file = document.getElementById('photo').files[0];
         console.log(file)
         var reader = new FileReader();
         //將文件以二進制形式讀入頁面
         reader.readAsDataURL(file);
         reader.onload=function(f){
         $scope.masterInfo.thumblist.push(f.currentTarget.result)
         console.log($scope.masterInfo)
         $scope.$apply()
         }
        }

        整個圖片上傳的dom層很簡單,一個form表單加上一個觸發表單的函數(function1)。在function1中獲取到<input type="file">的點擊事件,在選擇圖片的時候會做個判斷,如果超出支持的圖片類型圍的時候做個提醒。

        然后在后面調用function2和function3。

        在function2中獲取form表單對象,然后創建一個FormData對象,將獲取到的form表單傳入FormData,然后append一些上傳圖片的參數。再創建一個new XMLHttpRequest對象,然后open發送XHR請求接口,send(formData)傳遞參數給接口。

        到這個時候接口發送成功。

        這里的四個參數是formData中的四個參數

        接口相應成功。

        到這里有問題,圖片上傳成功寫入數據庫了,可是這時候需要在本地展示給用戶看但是網頁又不能直接訪問設備本地的圖片,因此我們需要FIleReader對象來對上傳的圖片文件讀取為DataURL來展示在本地。

        首先New 一個FileReader對象,然后將獲取到的input file對象傳入FileReader的 readAsDataURL()方法,此方法是將文件讀取為DataURL的。

        然后調用FileReader的onload方法,此方法的result會有轉換之后的url,因此我們可以獲取到此url,實際上是經過base64編碼的。然后push到圖片列表的最后

        到此解決了問題,前端展示了本地的圖片并且圖片也寫入了數據庫,當頁面再次刷新的時候拿到的是數據庫中的數據

        當然這里只是一個方法,移動端圖片上傳的插件比比皆是,甚至各種拖拽上傳的圖片上傳插件也很多,此處適合項目中不用引入插件的圖片上傳的簡單功能。

        相信看了本文案例你已經掌握了方法,更多精彩請關注Gxl網其它相關文章!

        推薦閱讀:

        vue2.x雙向綁定封裝詳解

        Npm做cli命令行工具

        Promise實現異步

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

        文檔

        angularJS+Ionic實現移動端圖片上傳功能

        angularJS+Ionic實現移動端圖片上傳功能:這次給大家帶來angularJS+Ionic實現移動端圖片上傳功能,angularJS+Ionic實現移動端圖片上傳功能的注意事項有哪些,下面就是實戰案例,一起來看一下。前端開發中經常會碰到圖片上傳的問題,網上的解決辦法很多,可是有些圖片上傳的插件會有一些附屬的插件,因
        推薦度:
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲第一极品精品无码久久| 亚洲人xxx日本人18| 色噜噜的亚洲男人的天堂| 国产福利免费视频| 91精品国产免费久久久久久青草| 国产一卡二卡≡卡四卡免费乱码| 亚洲精品无码专区久久| 久久美女网站免费| 婷婷亚洲天堂影院| 一级毛片免费在线播放| 精品亚洲成α人无码成α在线观看| 思思久久99热免费精品6| 亚洲AV无码之日韩精品| igao激情在线视频免费| 久久久久久a亚洲欧洲aⅴ| 91热久久免费精品99| 亚洲综合最新无码专区| 亚洲啪AV永久无码精品放毛片| 午夜视频在线在免费| 亚洲国产精品免费视频| 国产日韩AV免费无码一区二区三区| 国产亚洲精品影视在线产品| 久久永久免费人妻精品| 亚洲中文字幕久久精品无码喷水| 永久在线观看免费视频| 亚洲午夜电影在线观看高清| 免费无码又爽又刺激高潮的视频| 精品在线观看免费| 日本特黄a级高清免费大片| 人妻无码中文字幕免费视频蜜桃 | 亚洲中文字幕久久无码| 免费一级特黄特色大片在线观看| 免费无码又爽又刺激网站| 亚洲国产日韩在线| 亚洲AV网站在线观看| 无码囯产精品一区二区免费 | 免费一级毛片在线播放| 免费国产99久久久香蕉| 亚洲欧美日韩综合久久久久| 亚洲综合精品香蕉久久网| 在线v片免费观看视频|