詳解angularJS+Ionic移動(dòng)端圖片上傳的解決辦法

前端開發(fā)中經(jīng)常會(huì)碰到圖片上傳的問題,網(wǎng)上的解決辦法很多,可是有些圖片上傳的插件會(huì)有一些附屬的插件,因此因?yàn)橐粋€(gè)圖片上傳的問題可能額需要引入其他插件到項(xiàng)目中,久而久之項(xiàng)目會(huì)不倫不類,有時(shí)候插件之間也會(huì)有一些沖突,所以我們可以自己寫一個(gè)圖片上傳的方法。

創(chuàng)新互聯(lián)公司是一家以網(wǎng)站設(shè)計(jì)建設(shè),微信小程序開發(fā)、網(wǎng)站開發(fā)設(shè)計(jì),網(wǎng)絡(luò)軟件產(chǎn)品開發(fā),企業(yè)互聯(lián)網(wǎng)推廣服務(wù)為主的民營(yíng)科技公司。主要業(yè)務(wù)涵蓋:為客戶提供網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站開發(fā)、國(guó)際域名空間、網(wǎng)站優(yōu)化排名、買友情鏈接等服務(wù)領(lǐng)域。憑借建站老客戶口碑做市場(chǎng),建設(shè)網(wǎng)站時(shí),根據(jù)市場(chǎng)搜索規(guī)律和搜索引擎的排名收錄規(guī)律編程,全力為建站客戶設(shè)計(jì)制作排名好的網(wǎng)站,深受老客戶認(rèn)可和贊譽(yù)。

今天的demo是幫朋友做的一個(gè)移動(dòng)端微信公眾號(hào)項(xiàng)目,項(xiàng)目架構(gòu)采用angular+ionic,因?yàn)閷?duì)dom的操作jQuery會(huì)方便很多,但是jQuery比較厚重,所以最后選擇用輕量級(jí)的zepto來對(duì)項(xiàng)目dom進(jìn)行操作。

項(xiàng)目中有一個(gè)需求是上傳個(gè)人作品,實(shí)現(xiàn)功能需要H5新對(duì)象 FormData對(duì)象、XMLHttpRequest對(duì)象、FileReader對(duì)象。只需要這三個(gè)對(duì)象即可,話不多說上代碼。

dom結(jié)構(gòu):

詳解angularJS+Ionic移動(dòng)端圖片上傳的解決辦法

js結(jié)構(gòu):

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();
  //將文件以二進(jìn)制形式讀入頁面
  reader.readAsDataURL(file);
  reader.onload=function(f){
    $scope.masterInfo.thumblist.push(f.currentTarget.result)
    console.log($scope.masterInfo)
    $scope.$apply()
  }
}

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

然后在后面調(diào)用function2和function3。

在function2中獲取form表單對(duì)象,然后創(chuàng)建一個(gè)FormData對(duì)象,將獲取到的form表單傳入FormData,然后append一些上傳圖片的參數(shù)。再創(chuàng)建一個(gè)new XMLHttpRequest對(duì)象,然后open發(fā)送XHR請(qǐng)求接口,send(formData)傳遞參數(shù)給接口。

到這個(gè)時(shí)候接口發(fā)送成功。

詳解angularJS+Ionic移動(dòng)端圖片上傳的解決辦法

 這里的四個(gè)參數(shù)是formData中的四個(gè)參數(shù)

詳解angularJS+Ionic移動(dòng)端圖片上傳的解決辦法

接口相應(yīng)成功。

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

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

然后調(diào)用FileReader的onload方法,此方法的result會(huì)有轉(zhuǎn)換之后的url,因此我們可以獲取到此url,實(shí)際上是經(jīng)過base64編碼的。然后push到圖片列表的最后

詳解angularJS+Ionic移動(dòng)端圖片上傳的解決辦法

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

詳解angularJS+Ionic移動(dòng)端圖片上傳的解決辦法

當(dāng)然這里只是一個(gè)方法,移動(dòng)端圖片上傳的插件比比皆是,甚至各種拖拽上傳的圖片上傳插件也很多,此處適合項(xiàng)目中不用引入插件的圖片上傳的簡(jiǎn)單功能。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。

本文名稱:詳解angularJS+Ionic移動(dòng)端圖片上傳的解決辦法
當(dāng)前路徑:http://muchs.cn/article34/ispjpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、動(dòng)態(tài)網(wǎng)站、網(wǎng)站排名品牌網(wǎng)站制作、搜索引擎優(yōu)化小程序開發(fā)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名