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在事件监听方面的兼容性小结
Apr 07 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
判定是否原生方法的JS代码
Nov 12 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
javascript 用函数实现继承详解
May 28 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
深入理解Node.js中的进程管理
Mar 13 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
详解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+javascript的日历控件
2009/11/19 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
List Installed Hot Fixes
2007/06/12 Javascript
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
js微信分享API
2020/10/11 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
Python插件机制实现详解
2020/05/04 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
公司培训心得体会
2014/01/03 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
委托书范本
2014/04/02 职场文书
食品卫生管理制度
2015/08/06 职场文书
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js