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 相关文章推荐
事件模型在各浏览器中存在差异
Oct 20 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
浅谈Vue数据响应
Nov 05 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
微信小程序实现图片压缩
Dec 03 Javascript
在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
PHP 数组遍历顺序理解
2009/09/09 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
python图像处理之镜像实现方法
2015/05/30 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
生物科学专业个人求职信范文
2013/12/07 职场文书
运动会获奖感言
2014/02/11 职场文书
职称评定自我鉴定
2014/03/18 职场文书
小学新学期寄语
2014/04/02 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
地震捐款简报
2015/07/21 职场文书
七夕情人节问候语
2015/11/11 职场文书
Python中异常处理用法
2021/11/27 Python
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis