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

標籤：images   bsp   發送   cli   input   http   移動端   方法   work   

 

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

今天的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)傳遞參數給介面。
到這個時候介面發送成功。

 

這裡的四個參數是formData中的四個參數

介面相應成功。

到這裡有問題,圖片上傳成功寫入資料庫了，可是這時候需要在本地展示給使用者看但是網頁又不能直接存取裝置本地的圖片，因此我們需要FIleReader對象來對上傳的圖片檔案讀取為DataURL來展示在本地。

首先New 一個FileReader對象，然後將擷取到的input file對象傳入FileReader的 readAsDataURL()方法，此方法是將檔案讀取為DataURL的。

然後調用FileReader的onload方法，此方法的result會有轉換之後的url，因此我們可以擷取到此url，實際上是經過base64編碼的。然後push到圖片列表的最後

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

當然這裡只是一個方法，移動端圖片上傳的外掛程式比比皆是，甚至各種拖拽上傳的圖片上傳外掛程式也很多，此處適合項目中不用引入外掛程式的圖片上傳的簡易功能。


每天進步一點點

 

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