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

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

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

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();
  //將文件以二進(jìn)制形式讀入頁(yè)面
  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ā)送成功。

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

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

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

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

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論