Maison >interface Web >js tutoriel >Exemple de partage de code pour le téléchargement ionique de plusieurs images
Cet article présente principalement l'exemple de code permettant à ionic de sélectionner plusieurs images à télécharger. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.
Dans cette section, je vais partager avec vous comment utiliser le plug-in ImagePicker de Corodva pour sélectionner et télécharger plusieurs images. Sans plus tarder, venons-en au sujet.
Installation du plug-in
cordova plugin add corodva-plugin-imagepicker cordova plugin add cordova-plugin-file-transfer
Définition du service de sélection d'images
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 }); } } })
Service de téléchargement de fichiers de définition
//文件上传 .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("上传头像失败,请确保网络正常后再试"); } } } })
Appel au contrôleur
angular.module('starter.controllers', []) .controller('UsedUploadCtrl', function($scope, SelectPicture) { /** * 选择图片并上传 */ $scope.uploadImage = function(){ SelectPicture.choosePictures($scope); } })
Recommandations associées :
Comment créer un effet d'aperçu de téléchargement multi-images basé sur HTML
Exemple de fonction de téléchargement multi-images implémentée par le framework Laravel + Blob
Mise en œuvre de la fonction d'aperçu du téléchargement multi-images HTML
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!