亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

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下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消