詳解angularJS+Ionic移動端圖片上傳的解決辦法

更新時間：2017年09月13日 09:00:07 作者：雷厲風行L

本篇文章主要介紹了詳解angularJS+Ionic移動端圖片上傳的解決辦法，具有一定的參考價值，有需要的可以了解一下

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

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

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

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

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

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

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

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

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