Home > Web Front-end > JS Tutorial > Sample code sharing for ionic multi-image upload

Sample code sharing for ionic multi-image upload

小云云
Release: 2018-01-25 13:01:39
Original
1235 people have browsed it

This article mainly introduces the sample code for ionic to select multiple pictures to upload. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

In this section, I will share with you how to use Corodva's ImagePicker plug-in to select and upload multiple images. Without further ado, let’s get to the topic.

Plug-in installation


cordova plugin add corodva-plugin-imagepicker
cordova plugin add cordova-plugin-file-transfer
Copy after login

Define image selection service


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
  });
 }
 }
})
Copy after login

Define file upload service


//文件上传
.factory(&#39;UploadFile&#39;, 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(&#39;/&#39;) + 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("上传头像失败,请确保网络正常后再试");
  }
 }
 }
})
Copy after login

Call in Controller


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

Related recommendations:

Based on How to create a multi-image upload preview effect in HTML

Example of multi-image upload function implemented by Laravel framework + Blob

HTML multi-image upload preview function Implementation

The above is the detailed content of Sample code sharing for ionic multi-image upload. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template