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 相关文章推荐
Javascript算符的优先级介绍
Mar 20 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
vue实现点击追加选中样式效果
Nov 01 Javascript
vue实现户籍管理系统
May 29 Javascript
详解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
PHP中的日期及时间
2006/11/23 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
玩转方法:call和apply
2014/05/08 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
python实现汉诺塔方法汇总
2016/07/25 Python
Python管理Windows服务小脚本
2018/03/12 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
酒店开业庆典主持词
2014/03/21 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
单位在职证明书
2014/09/11 职场文书
护士求职简历自我评价
2015/03/10 职场文书
培训后的感想
2015/08/07 职场文书
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis