快捷導(dǎo)航

ionic cordova一次上傳多張圖片（類似input file提交表單)的實(shí)現(xiàn)方法

更新時(shí)間：2016年12月16日 09:03:15 投稿：mrr

這篇文章主要介紹了ionic cordova一次上傳多張圖片（類似input file提交表單)的實(shí)現(xiàn)方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

我們可以通過(guò)cordova提供的插件調(diào)用攝像頭或圖庫(kù)選擇需要的圖片上傳，按cordova官方的方法，每次選擇完后就直接上傳，這并不符合用戶的習(xí)慣，最好的用戶習(xí)慣是用戶選擇完需要的圖片，并可在本地預(yù)覽，接著用戶再次打開(kāi)攝像頭或圖庫(kù)再次選擇圖片，接著預(yù)覽，對(duì)于不需要的圖片刪除，最后確定可以后，再一次性上傳所有圖片。顯然這種方式，cordova是不支持，那要如何實(shí)現(xiàn)呢，以下是我的方法：

通過(guò)調(diào)用$cordovaImagePicker.getPictures該方法打開(kāi)圖庫(kù)，獲得圖片的URL地址，ps:相機(jī)原理相同

$cordovaImagePicker.getPictures(options).then(function(imageURI) { 
 
  for(var i=0; i<imageURI.length; i++){ 
    rLFSURL(imageURI[i]); 
  } 
 
}, function(err) { 
  if (err.message && (err.message.toString().indexOf('cancelled') < 0)) { 
    $scope.popTips('打開(kāi)失敗','打開(kāi)圖片遇到問(wèn)題'); 
  }   
});

上面方法可以獲得一組圖片地址列表，接下來(lái)要做的就是把這些圖片轉(zhuǎn)成二進(jìn)制流存儲(chǔ)在本地，如下：

function rLFSURL(imageURI){ 
  window.resolveLocalFileSystemURL(imageURI, function(fileEntry) { 
    fileEntry.file(function(file) { 
      var reader = new FileReader(); 
      reader.onloadend = function(e) { 
        //需要將圖片路徑轉(zhuǎn)換為二進(jìn)制流，并且指定類型為圖像格式（還有其他格式，如文本格式等等） 
        var the_file = new Blob([e.target.result ], { type: "image/jpeg" } ); 
        //存儲(chǔ)圖片二進(jìn)制流 
        CacheData.setImgFileList(the_file); 
        //存儲(chǔ)圖片地址用于預(yù)覽 
        CacheData.setImageURIList(imageURI); 
      }; 
      reader.readAsArrayBuffer(file); 
    }, function(e){$scope.errorHandler(e)}); 
  }, function(e){$scope.errorHandler(e)}); 
}

上面的關(guān)鍵是var the_file = new Blob([e.target.result ], { type: "image/jpeg" } );，這是將圖片轉(zhuǎn)化為二進(jìn)制，然后我用事先定義好的方法CacheData.setImgFileList()和CacheData.setImageURIList()把轉(zhuǎn)化后的二進(jìn)制流及圖片存儲(chǔ)起來(lái)。主意new Blob()方法并不兼容低版本的安卓系統(tǒng)。

如果再增加圖片，我們只需要把他push進(jìn)我們的數(shù)組里即可，刪除的話就splice(index, 1)掉，這樣待用戶操作完后，點(diǎn)提交，我就把這些參數(shù)append進(jìn)new FormData()里就OK了，如下

for(var i=0; i < CacheData.getImgFileList().length; i++){ 
  formDataByImage.append("files", CacheData.getImgFileList()[i],"images.jpg"); 
} 
//以下是表單參數(shù) 
formDataByImage.append("tenantId", 1); 
formDataByImage.append("facilityIdentify", "217ae60e5bc746f"); 
//formDataByImage.append("nodeName", nodeName); 
formDataByImage.append('sessiontoken', formData.sessiontoken); 
formDataByImage.append('method', 'fax.upload');

后臺(tái)接收的方法就跟input file提交表單一樣，這里就不多寫(xiě)。

下面給大家補(bǔ)充下：Ionic 和cordova的區(qū)別是什么

很多新朋友ionic基礎(chǔ)教程都學(xué)完了，還是不知道ionic 和cordova 是什么關(guān)系

ionic是什么：

Ionic(ionicframework)一款開(kāi)源的Html5移動(dòng)App開(kāi)發(fā)框架,是AngularJS移動(dòng)端解決方案,Ionic以流行的跨平臺(tái)移動(dòng)app開(kāi)發(fā)框架phoengap為藍(lán)本，讓開(kāi)發(fā)者可以通過(guò)命令行工具快速生成android ios移動(dòng)app應(yīng)用

phoengap是什么？

PhoneGap是一個(gè)用基于HTML，CSS和JavaScript的，創(chuàng)建移動(dòng)跨平臺(tái)移動(dòng)應(yīng)用程序的快速開(kāi)發(fā)平臺(tái)。它使開(kāi)發(fā)者能夠利用iPhone，Android，Palm，Symbian,WP7,WP8,Bada和Blackberry智能手機(jī)的核心功能——包括地理定位，加速器，聯(lián)系人，聲音和振動(dòng).

可能有些新手還是不明白，繼續(xù)往下看：

通俗的講：ionic是一款基于angularjs的html5移動(dòng)app開(kāi)發(fā)框架

phonegap就是一款可以打包并且可以讓js調(diào)用原生的移動(dòng)app框架

問(wèn)題來(lái)了？

那我不用命令安裝ionic 可以使用ionic開(kāi)發(fā)app嗎？答案是可以得。

就可以把ionic當(dāng)作一款html5 移動(dòng)app框架，把phonegap/cordova 當(dāng)作打包并且調(diào)用原生的框架就可以了

至于：為什么ionic也可以打包，上面也說(shuō)了，ionic的打包插件是基于phonegap/cordova的.

以上所述是小編給大家介紹的ionic cordova一次上傳多張圖片（類似input file提交表單)的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: