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

NO IMAGE

我們可以通過cordova提供的外掛呼叫攝像頭或相簿選擇需要的圖片上傳,按cordova官方的方法,每次選擇完後就直接上傳,這並不符合使用者的習慣,最好的使用者習慣是使用者選擇完需要的圖片,並可在本地預覽,接著使用者再次開啟攝像頭或相簿再次選擇圖片,接著預覽,對於不需要的圖片刪除,最後確定可以後,再一次性上傳所有圖片。顯然這種方式,cordova是不支援,那要如何實現呢,以下是我的方法:

通過呼叫$cordovaImagePicker.getPictures該方法開啟相簿,獲得圖片的URL地址,ps:相機原理相同


$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('開啟失敗','開啟圖片遇到問題'); 
}   
}); 

上面方法可以獲得一組圖片地址列表,接下來要做的就是把這些圖片轉成二進位制流儲存在本地,如下:


function rLFSURL(imageURI){ 
window.resolveLocalFileSystemURL(imageURI, function(fileEntry) { 
fileEntry.file(function(file) { 
var reader = new FileReader(); 
reader.onloadend = function(e) { 
//需要將圖片路徑轉換為二進位制流,並且指定型別為影象格式(還有其他格式,如文字格式等等) 
var the_file = new Blob([e.target.result ], { type: "image/jpeg" } ); 
//儲存圖片二進位制流 
CacheData.setImgFileList(the_file); 
//儲存圖片地址用於預覽 
CacheData.setImageURIList(imageURI); 
}; 
reader.readAsArrayBuffer(file); 
}, function(e){$scope.errorHandler(e)}); 
}, function(e){$scope.errorHandler(e)}); 
} 

上面的關鍵是var the_file = new Blob([e.target.result ], { type: "image/jpeg" } );,這是將圖片轉化為二進位制,然後我用事先定義好的方法CacheData.setImgFileList()和CacheData.setImageURIList()把轉化後的二進位制流及圖片儲存起來。主意new Blob()方法並不相容低版本的安卓系統。

如果再增加圖片,我們只需要把他push進我們的陣列裡即可,刪除的話就splice(index, 1)掉,這樣待使用者操作完後,點提交,我就把這些引數append進new FormData()裡就OK了,如下


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

後臺接收的方法就跟input file提交表單一樣,這裡就不多寫。

下面給大家補充下:Ionic 和cordova的區別是什麼

很多新朋友ionic基礎教程都學完了,還是不知道ionic 和cordova 是什麼關係

ionic是什麼:

Ionic(ionicframework)一款開源的Html5移動App開發框架,是AngularJS移動端解決方案,Ionic以流行的跨平臺移動app開發框架phoengap為藍本,讓開發者可以通過命令列工具快速生成android ios移動app應用

phoengap是什麼?

PhoneGap是一個用基於HTML,CSS和JavaScript的,建立移動跨平臺移動應用程式的快速開發平臺。它使開發者能夠利用iPhone,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry智慧手機的核心功能——包括地理定位,加速器,聯絡人,聲音和振動.

可能有些新手還是不明白,繼續往下看:

通俗的講:ionic是一款基於angularjs的html5移動app開發框架

phonegap就是一款可以打包並且可以讓js呼叫原生的移動app框架

問題來了?

那我不用命令安裝ionic 可以使用ionic開發app嗎?答案是可以得。

就可以把ionic當作一款html5 移動app框架,把phonegap/cordova 當作打包 並且呼叫原生的框架就可以了

至於:為什麼ionic也可以打包,上面也說了,ionic的打包外掛是基於phonegap/cordova的.

以上所述是小編給大家介紹的ionic cordova一次上傳多張圖片(類似input file提交表單)的實現方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對指令碼之家網站的支援!

您可能感興趣的文章:

ionic2自定義cordova外掛開發以及使用(Android)VS2015在升級到Update2之後執行Cordova專案異常的解決方案教你用Cordova打包Vue專案的方法詳解cordova打包成webapp的方法cordova入門基礎教程及使用中遇到的一些問題總結