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

2019-11-19 15:28:25

字體：大中小

來源：轉載

供稿：網友

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

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

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

dom結構：

js結構：

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)傳遞參數給接口。

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