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中取得的點擊事件，在選擇圖片的時候會做個判斷，如果超出支援的圖片類型圍的時候做個提醒。

然後在後面呼叫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到圖片列表的最後

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

#當然這裡只是一個方法，移動端圖片上傳的插件比比皆是，甚至各種拖曳上傳的圖片上傳插件也很多，此處適合專案中不用引入插件的圖片上傳的簡單功能。        

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue2.x雙向綁定封裝詳解

Npm做cli命令列工具

Promise實作非同步

#

以上是angularJS+Ionic實作行動端圖片上傳功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！