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鼠标滑过提示title具体实现代码
Aug 06 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
Vue指令实现OutClick的示例
Nov 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 receiveMail实现收邮件功能
2018/04/25 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
对django views中 request, response的常用操作详解
2019/07/17 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
JPA面试常见问题
2016/11/14 面试题
《莫高窟》教学反思
2014/02/25 职场文书
师范生自我鉴定
2014/03/20 职场文书
村道德模范事迹材料
2014/08/28 职场文书
创先争优个人总结
2015/03/04 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
处理canvas绘制图片模糊问题
2022/05/11 Javascript