ZH奶酪: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) {
}
扩展:
这里有一篇文章,使用ng-cordova的file transfer插件进行上传和下载->http://santoshshinde2012.blogspot.sg/2015/03/file-upload-download-with-ng-cordova.html
ZH奶酪:ionic+angularJS+cordova(FileTransfer)上传图片【移动端】的更多相关文章
- WebApp开发框架Ionic+AngularJS+Cordova
目前的手机APP有三类:原生APP.WebAPP.HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Ionic Ionic是一个新的.可以使用HTML5构建混合移动应用 ...
- HybridAPP开发框架Ionic+AngularJS+Cordova搭建
Ionic Ionic是一个新的.可以使用HTML5构建混合移动应用的用户界面框架,它自称为是"本地与HTML5的结合".该框架提供了很多基本的移动用户界面范例,例如像列表(lis ...
- ZH奶酪:AngularJS/JavaScript上传图片【PC端】
[功能介绍] 类似与修改个人信息的时候,点击头像,就可以完成选择照片.上传照片等步骤达到替换头像的目的. [运行流程] (1)点击头像 (2)选择头像 (3)点击“完成”,上传头像 1.HTML图片部 ...
- ZH奶酪:AngularJS判断checkbox/复选框是否选中并实时显示
最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: <!DOCTYPE htm ...
- Cordova Ionic AngularJS
实践分享:开始用Cordova+Ionic+AngularJS开发App http://www.cocoachina.com/webapp/20150707/12395.html
- [目录]hybrid app 开发实战(基于ionic,cordova,angularjs)
序:为什么要写这个系列 第一章:hybrid app开发之技术选型 第二章:ionic,cordova,phonegap关系浅析 第三章:ionic环境搭建之windows篇 第四章:ionic环境搭 ...
- Mac下安装ionic和cordova,并生成iOS项目
为了开发HTML5,除了最新使用React Native等之外,目前首选的为稳定的ionic+Angularjs来开发iOS和android. Ionic(ionicframework一款接近原生的H ...
- 混合开发 Hybird Ionic Angular Cordova web 跨平台 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- ionic 和cordova的区别是什么
很多新朋友ionic基础教程都学完了,还是不知道ionic 和cordova 是什么关系 ionic是什么: Ionic(ionicframework)一款开源的Html5移动App开发框架,是Ang ...
随机推荐
- 使用HttpClient消费ASP.NET Web API服务
本篇体验使用HttpClient消费ASP.NET Web API服务,例子比较简单. 依次点击"文件","新建","项目". 选择&quo ...
- excel 单元格内容太多,替换有问题
excel 单元格内容太多,替换有问题
- python笔记33-python3连mysql增删改查
前言 做自动化测试的时候,注册了一个新用户,产生了多余的数据,下次用同一账号就无法注册了,这种情况该怎么办呢? 自动化测试都有个数据准备和数据清理的操作,如果因为此用例产生了多余的数据,就需要数据清理 ...
- Linux进程ID号--Linux进程的管理与调度(三)
转自:http://blog.csdn.net/gatieme/article/category/6225543 日期 内核版本 架构 作者 GitHub CSDN 2016-05-12 Linux- ...
- Asp.Net MVC3.0项目部署到Win7 64过程总结
前言 之前一直是通过Visual Studio直接F5来运行自己编写的项目或者小程序,很少通过部署发布到IIS上面,于是自己便在自己的笔记本上进行测试,结果还真是发现了不少问题,于是自己重新通过虚机程 ...
- ios之归档demo
ios对自定义对象的归档.首先需要实现NSCoding与NSCopying接口 #import <Foundation/Foundation.h> @interface Person : ...
- 以太坊私有链POA模式
1.创建目录 mkdir devnet cd devnet mkdir node1 node2 2.创建账户 geth --datadir node1/ account new geth --data ...
- Java Date 时分秒置0
Date now = new Date(); Calendar cal1 = Calendar.getInstance(); cal1.setTime(now); // 将时分秒,毫秒域清零 cal1 ...
- BZOJ 1093 最大半连通子图 题解
1093: [ZJOI2007]最大半连通子图 Time Limit: 30 Sec Memory Limit: 162 MBSubmit: 2767 Solved: 1095[Submit][S ...
- 数据库实例: STOREBOOK > 数据文件/退回字段/重做日志组|管理员
ylbtech-Oracle:数据库实例: STOREBOOK > 数据文件/退回字段/重做日志组|管理员 数据文件/退回字段/重做日志组|管理员 1. 数据库实例: STOREBOOK & ...