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函数参数的可修改性问题
Dec 05 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 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 无限级数据JSON格式及JS解析
2010/07/17 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
react 生命周期实例分析
2020/05/18 Javascript
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
python实现对一个完整url进行分割的方法
2015/04/29 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
python3中的md5加密实例
2018/05/29 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
python中eval与int的区别浅析
2019/08/11 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
Python有参函数使用代码实例
2020/01/06 Python
基于python监控程序是否关闭
2020/01/14 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
打架检讨书100字
2014/01/08 职场文书
信息总监管理职责范本
2014/03/08 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
小学运动会通讯稿
2015/07/18 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
Python利用zhdate模块实现农历日期处理
2022/03/31 Python
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python
Redis数据同步之redis shake的实现方法
2022/04/21 Redis
python实现商品进销存管理系统
2022/05/30 Python
服务器nginx权限被拒绝解决案例
2022/09/23 Servers