标签:
【功能介绍】
在开发应用的时候,经常会遇到需要上传图片的功能,比如修改个人资料的头像。本文介绍的是基于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)上传图片【移动端】
标签:
原文地址:http://www.cnblogs.com/CheeseZH/p/4756736.html