ionic+angularJS+cordova(FileTransfer)上传图片【移动端】

简介:

【功能介绍】

在开发应用的时候,经常会遇到需要上传图片的功能,比如修改个人资料的头像。本文介绍的是基于ionic框架,在移动端上传图片的功能。

【功能流程】

(1)点击页面上的头像,弹出一个对话框,选择[拍照]或者[从相册选择];

(2)选取/拍摄照片;

(3)上传照片;

【html核心代码】

<div ng-controller="myCtrl">
    <a ng-click="choosePicMenu()">
        <img ng-src="{{img}}">
    </a>
</div>

【myCtrl.js核心代码】

(1)选取图片的函数

复制代码
//定义选择照片的函数,
$scope.choosePicMenu = function() {
var type = 'gallery';
$ionicActionSheet.show({
buttons: [
{ text: '拍照' },
{ text: '从相册选择' }
],
titleText: '选择照片',
cancelText: '取消',
cancel: function() {
},
buttonClicked: function(index) {
if(index == 0){
type = 'camera';
}else if(index == 1){
type = 'gallery';
}
//Camera.getPicture(type)->根据选择的“选取图片”的方式进行选取
Camera.getPicture(type).then(
          //返回一个imageURI,记录了照片的路径
function (imageURI) {
$scope.me.image = imageURI;
            //更新页面上的照片
$scope.img = imageURI;
$scope.$apply();
},
function (err) {
});
return true;
}
});
};
复制代码

 (2)上传函数中的核心代码

复制代码
//新建文件上传选项,并设置文件key,name,type
var options = new FileUploadOptions();
options.fileKey="ffile";
options.fileName=$scope.me.image.substr($scope.me.image.lastIndexOf('/')+1);
options.mimeType="image/jpeg";
//用params保存其他参数,例如昵称,年龄之类
var params = {};
params['name'] = $scope.me.name;
//把params添加到options的params中
options.params = params;
//新建FileTransfer对象
var ft = new FileTransfer();
//上传文件
ft.upload(
$scope.me.image,
encodeURI('some url'),//把图片及其他参数发送到这个URL,相当于一个请求,在后台接收图片及其他参数然后处理
uploadSuccess,
uploadError,
options);
//upload成功的话
function uploadSuccess(r) {
var resp = JSON.parse(r.response);
if(resp.status == 0){
     //返回前一页面
$navHistory.back();
}else{
$ionicPopup.alert({
title: 'Message',
cssClass: 'alert-text',
template: 'Upload fail!'
});
}
}
//upload失败的话
function uploadError(error) {
}
复制代码



本文转自ZH奶酪博客园博客,原文链接:http://www.cnblogs.com/CheeseZH/p/4756736.html,如需转载请自行联系原作者

相关文章
|
Web App开发 Java 开发工具
ionic和cordova初探--从安装到运行首个app
好多人说ionic好用,一直要推荐我用,我就不信了,来安装玩一下试试效果。实践出真知!安装过程各种坑,工具太多了,太麻烦了,差点放弃(还好坚持下来呢)。 1.安装node 许多前端工具的安装都依赖于node的包管理器npm,Node官网: https://nodejs.org/ 安装完成后在cmd中输入 npm -v 回车。
2375 0
|
移动开发 JavaScript Java
给Ionic写一个cordova(PhoneGap)插件
    给Ionic写一个cordova(PhoneGap)插件   之前由javaWeb转html5开发,由于面临新技术,遂在适应的过程中极为挣扎,不过还好~,这个过程也极为短暂;现如今面临一些较为复杂的需求还会有一丝丝头痛,却没有一开始那么强烈了。
1943 0
|
Web App开发 移动开发 JavaScript
Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App
原文:Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App 安装VS2015 Update2的过程是非常曲折的。还好经过不懈的努力,终于折腾成功了。 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错。
1776 0
|
Android开发 iOS开发 存储
ionic/cordova热部署
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/inforstack/article/details/72462150 简介 Cordova热代码推送插件提供了在应用程序中执行基于Web的内容的自动更新的功能。
1415 0
|
JavaScript 前端开发 Android开发
cordova ,ionic 中cordova.js 提示deviceready has not fired after 5 seconds
我用的是ionic start 命令生成项目 ,用  cordova create 也是可以的。
1690 0
|
JavaScript 开发工具 Python
使用cordova+Ionic+AngularJs进行Hybird App开发的环境搭建手册
一,所需工具       1,JDK:生成     2,安卓SDK开发环境     3,NodeJs:主要使用的还是npm     4,Python开发环境     5,VS 2012(2008,2015也可以,已亲测):安装这个主要是需要一些.net的东西,也没具体查是啥,图个省事。
1455 0
|
JavaScript 前端开发 Android开发
Ionic 开发中遇到的常见问题及解决方案
Ionic 常见问题及解决方案
8320 0
|
Web App开发 索引
Ionic 2 开发(一)_安装与目录结构
由于公司开始使用后ionic 进行前段开发,现在需要学习下ionic,虽然是后台开发,但是还是有必要了解下的 安装Node.js 官网:http://nodejs.cn/ 自行下载安装 安装Ionic npm install -g cordova npm install -g ionic 设置淘宝镜像 npm config set registry https://registry.
1077 0
|
缓存 JavaScript Android开发
Ionic 1 & 2 开发常见问题 Q&A
原文发表于我的技术博客 本文分享了在 Ionic 1 & 2 版本开发过程中常见问题的一些 Q&A,供慕课网同学或其他朋友参考。原文发表于我的技术博客 1. 版本的问题 Ionic 2 目前属于快速迭代更新的版本,版本的更新会带来如文件结构和少许代码的变更,不过底层还是构建于 Angular 2 ...
1503 0