ionic选择多张图片上传的示例代码


Posted in Javascript onOctober 10, 2017

在上一篇博客ionic本地相册、拍照、裁剪、上传(单图完全版) 中,跟大家分享了ionic项目选择本地图片、拍照、裁剪、上传到服务器的内容,但是上一节的内容由于使用了Cordova的Camera插件进行了图片选择与拍摄,所以每次只能支持1张图片的选择与上传。上一篇博客中的内容适合用于头像情景。

在本节中,跟大家分享使用Corodva的ImagePicker插件,实现多图选择与上传。废话不多说,进入主题。

插件安装

cordova plugin add corodva-plugin-imagepicker
cordova plugin add cordova-plugin-file-transfer

定义图片选择服务

angular.module('starter.services', [])
//配置单张图片选择
.factory('SelectPicture', function(UploadFile, Toast) {
 return {
 /**
  * 从图库选择多张图片
  */
 choosePictures: function() {
  window.imagePicker.getPictures(function(res){
  for(var i = 0; i < res.length; i++){
   UploadFile.uploadFile(res[i], "我的服务器接口地址");//传递自己的服务器接口地址
  }
  }, function(err){
  alert(err);
  }, {
  maximumImagesCount: 10, 
  quality: 80
  });
 }
 }
})

定义文件上传服务

//文件上传
.factory('UploadFile', function(Toast) {
 return {
 /**
  * 上传文件到服务器
  *
  * @param fileUrl 文件路径
  * @param server 服务器接口
  */
 uploadFile: function(fileUrl, server) {
  document.addEventListener("deviceready", onDeviceReady, false);
  function onDeviceReady() {
  var options = new FileUploadOptions();
  options.fileKey = "BeanYon";//后台获取文件的键值
  options.fileName = fileUrl.substr(fileUrl.lastIndexOf('/') + 1);
  options.mimeType = "image/jpeg";
  options.chunkedMode = false;

  var params = {};//这里可添加自定义参数
  options.params = params;

  var ft = new FileTransfer();
  ft.upload(fileUrl, 
     encodeURI(server), 
     success, 
     err, 
     options);
  }

  function success(r){
   Toast.show("图片已经成功上传");
  }

  function err(error){
   Toast.show("上传头像失败,请确保网络正常后再试");
  }
 }
 }
})

在Controller中调用

angular.module('starter.controllers', [])
.controller('UsedUploadCtrl', function($scope, SelectPicture) {
 /**
 * 选择图片并上传
 */
 $scope.uploadImage = function(){
 SelectPicture.choosePictures($scope);
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js操作二级联动实现代码
Jul 27 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
JS数组方法some、every和find的使用详情
Oct 05 Javascript
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 #Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 #Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 #Javascript
JS判断数组那点事
Oct 10 #Javascript
template.js前端模板引擎使用详解
Oct 10 #Javascript
AngularJS中table表格基本操作示例
Oct 10 #Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 #Javascript
You might like
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
部署Python的框架下的web app的详细教程
2015/04/30 Python
python微信撤回监测代码
2019/04/29 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
怎样声明一个匿名的内部类
2016/06/01 面试题
大学生职业生涯规划书范文
2014/01/04 职场文书
安全事故检讨书
2014/01/18 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
团员年度个人总结
2015/02/26 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
发票退票证明
2015/06/24 职场文书
解除租赁合同协议书
2016/03/21 职场文书