首页 > 代码库 > Ionic 选择图片上传
Ionic 选择图片上传
1.添加插件
1.1 安装ngcordova
1.2 安装选择图片插件
1.3 安装上传插件
1.4查看安装插件集合
2.html 代码
<div class="item item-icon-right"> <span>封面图片</span> <i class="icon ion-images royal" data-tap-disabled="true" ng-click="taskFMpicker()"></i> </div> <div class="item item-body" > <img class="full-image" ng-src="{{FMimage}}" /> </div> <div class="item item-icon-right"> <span>图片相册</span> <i class="icon ion-images royal" data-tap-disabled="true" ng-click="taskXCpicker()"></i> </div> <div class="row row-wrap item-calm" > <div class="col col-50" ng-repeat="(k,v) in images"><img ng-src="{{v.imgurl}}" style="width:120px;height:120px; "/> <p><button type="button" class="button button-small button-outline button-positive " ng-click="delimgs(v.imgurl)">删除</button></p></div> <div > </div> </div>
3.controller 代码
//封面选择 $scope.taskFMpicker= function () { var options = { maximumImagesCount: 1, width: 600, height: 600, quality: 80 }; $cordovaImagePicker.getPictures(options).then(function(results) { var uri = results[0], name = uri; if (name.indexOf(‘/‘)) { var i = name.lastIndexOf(‘/‘); name = name.substring(i + 1); } $scope.FMimage = uri; $scope.uploadimage(uri,0); }, function(error) { alert(error); }); } //选择相册 $scope.taskXCpicker= function () { var options = { maximumImagesCount: 5, width: 600, height: 600, quality: 80 }; $cordovaImagePicker.getPictures(options) .then(function (results) { for (var i = 0; i < results.length; i++) { // console.log(‘Image URI: ‘ + results[i]); $scope.images.push({"imgurl":results[i],id:0}); $scope.uploadimage(results[i],1) ; } }, function(error) { // error getting photos }); } //上传图片 $scope.uploadimage = function(uri,type) { var fileURL = uri; var options = new FileUploadOptions(); options.fileKey = "file"; options.fileName = fileURL.substr(fileURL.lastIndexOf(‘/‘) + 1); options.mimeType = "image/jpeg"; var server=encodeURI(ENV.APIUrl+"/Upload/ImgUpload"); var ft = new FileTransfer(); $ionicLoading.show({ template: ‘上传中...‘ }); ft.upload(fileURL, server, function(data) { // alert(JSON.stringify(data)); var resp = JSON.parse(data.response); if(resp[0].status==1){ if(type==0){ $scope.FMImgeList.push(resp[0].filename); //alert($scope.FMImgeList.join(‘,‘)); } else{ $scope.XCImgeList.push("0"+"|"+resp[0].filename); } } $ionicLoading.hide(); }, function(error) { // alert(JSON.stringify(error)); $ionicLoading.hide(); }, options); }
Ionic 选择图片上传
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。