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 相关文章推荐
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
vue实现div单选多选功能
Jul 16 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读取flv文件的播放时间长度
2009/09/03 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
模仿jQuery each函数的链式调用
2009/07/22 Javascript
关于js类的定义
2011/06/28 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
js实现下一页页码效果
2017/03/07 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
webpack4 处理CSS的方法示例
2018/09/03 Javascript
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
九年级历史教学反思
2016/02/19 职场文书
python创建字典及相关管理操作
2022/04/13 Python