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


Posted in Javascript onDecember 16, 2016

我们可以通过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提交表单)的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
jquery cookie插件代码类
May 26 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
如何通过JS实现日历简单算法
Oct 14 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 #Javascript
概述jQuery中的ajax方法
Dec 16 #Javascript
JS数组排序方法实例分析
Dec 16 #Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 #Javascript
详解jQuery简单的表单应用
Dec 16 #Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 #Javascript
简单三步实现报表页面集成天气
Dec 15 #Javascript
You might like
PHP4实际应用经验篇(8)
2006/10/09 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
python3.5仿微软计算器程序
2020/03/30 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
numpy自动生成数组详解
2017/12/15 Python
Python补齐字符串长度的实例
2018/11/15 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
django 中QuerySet特性功能详解
2019/07/25 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
小区门卫值班制度
2014/01/24 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android