ionic cordova一次上传多张图片（类似input file提交表单)的实现方法

ionic cordova一次上传多张图片（类似input file提交表单)的实现方法

我们可以通过cordova提供的插件调用摄像头或图库选择需要的图片上传，按cordova官方的方法，每次选择完后就直接上传，这并不符合用户的习惯，最好的用户习惯是用户选择完需要的图片，并可在本地预览，接着用户再次打开摄像头或图库再次选择图片，接着预览，对于不需要的图片删除，最后确定可以后，再一次性上传所有图片。显然这种方式，cordova是不支持，那要如何实现呢，以下是我的方法：

通过调用$cordovaImagePicker.getPictures该方法打开图库，获得图片的URL地址，ps:相机原理相同

$cordovaImagePicker.getPictures(options).then(function(imageURI) {

for(var i=0; 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提交表单)的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

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提交表单)的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。