为了账号安全,请及时绑定邮箱和手机立即绑定

ionic+angularjs+cordova 图片上传控件

标签:
AngularJS

1.安装图片上传插件:ionic plugin add https://github.com/wymsee/cordova-imagePicker
2.安装调用摄像头插件:ionic plugin add https://github.com/apache/cordova-plugin-camera
3.安装文件上传插件:ionic plugin add https://github.com/apache/cordova-plugin-file-transfer

HTML页面:
<div class="col-20"> <i class="icon ion-android-image icon-size15" ng-click="demandsUp_new()"></i></div>
controller.js:
//上传图片
$scope.mm = {};
$scope.UpIMG = [];
$scope.demandsUp_new = function(){
var options = {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: false,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 800,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false,
correctOrientation:true
};
var type = 'gallery';
$ionicActionSheet.show({
buttons: [
{ text: '拍照' },
{ text: '从相册选择' }
],
titleText: '选择照片',
cancelText: '取消',
cancel: function() {
},
buttonClicked: function(index) {
if(index == 0){
//Camera.getPicture(type)->根据选择的“选取图片”的方式进行选取
$cordovaCamera.getPicture(options).then(
//返回一个imageURI,记录了照片的路径
function (file) {
var options = new FileUploadOptions();
options.fileKey="file";
options.fileName=file.substr(file.lastIndexOf('/')+1);
options.mimeType="image/jpeg";
var ft = new FileTransfer();
ft.onprogress = function(progressEvent) {
//上传中
$ionicLoading.show({
template: '上传中,请等待...'
})
};
ft.upload(file, encodeURI(Configs.comment_url+"/apps/file/uploadchatpic"),
function(re){
console.log(JSON.stringify(re));
console.log(re.responseCode);
var status= JSON.parse(re.response).status;
console.log("aa:"+status)
if(status == 1){
//上传成功
console.log("上传成功");
var img_url = JSON.parse(re.response).data;
console.log(img_url);
$scope.chat.ct = img_url;
$scope.chat.tag = "pic";
$scope.send();
$ionicLoading.hide();
}else{
$ionicLoading.hide();
}

                }, function(e){
                  console.log(JSON.stringify(e));
                  $ionicLoading.hide()
                }, options);
          },
          function (err) {
          });
    }else if(index == 1){
      $scope.kpic = [];
      var fobj = [];
      var imgList =[];

      window.imagePicker.getPictures(
          function(results) {
            console.log(results);
            for (var i = 0; i < results.length; i++) {
              var file = results[i];

              var options = new FileUploadOptions();
              options.fileKey="file";
              options.fileName=results[i].substr(results[i].lastIndexOf('/')+1);
              options.mimeType="image/jpeg";

              fobj[i] = new FileTransfer();
              fobj[i].onprogress = function(progressEvent) {
                //上传中
                $ionicLoading.show({
                  template: '上传中,请等待...'
                })
              };
              fobj[i].upload(file, encodeURI(Configs.comment_url+"/apps/file/uploadchatpic"),
                  function(re){
                      console.log(JSON.stringify(re));
                      console.log(re.responseCode);
                      var status= JSON.parse(re.response).status;
                      console.log("aa:"+status)
                      if(status == 1){
                          //上传成功
                          console.log("上传成功");
                          var img_url = JSON.parse(re.response).data;
                          console.log(img_url);
                          $scope.chat.ct = img_url;
                          $scope.chat.tag = "pic";
                          $scope.send();
                          $ionicLoading.hide();
                          console.log("tab:"+$scope.chat.tag )

                      }else{
                          $ionicLoading.hide();
                      }
                  }, function(e){
                    console.log(JSON.stringify(e));
                    $ionicLoading.hide()
                  }, options);

            }
          }, function (error) {
            console.log('Error: ' + error);
          },{
            maximumImagesCount: 10,
            width: 800
          }
      );

    }

    console.log(options.type);

    return true;
  }
});

}

点击查看更多内容
6人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
8
获赞与收藏
47

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消