phonegap+JQM拍照并上传头像到服务器

时间:2022-09-18 22:40:21
工作中需要将用户头像上传到服务器。

需要这么几步:

1,点击img元素弹出Popup,选择拍照或从图片库中选择图片。

2,上传图片

在phonega中拍照需要camera插件。
上传文件需要file-transfer插件。

我在工程中安装的所有插件如下:
        cordova plugin add org.apache.cordova.device
cordova plugin add org.apache.cordova.network-information
cordova plugin add org.apache.cordova.battery-status
cordova plugin add org.apache.cordova.geolocation
cordova plugin add org.apache.cordova.dialogs
cordova plugin add org.apache.cordova.camera
cordova plugin add org.apache.cordova.media-capture
cordova plugin add org.apache.cordova.media
cordova plugin add org.apache.cordova.vibration
cordova plugin add org.apache.cordova.globalization
cordova plugin add org.apache.cordova.splashscreen
cordova plugin add org.apache.cordova.inappbrowser
cordova plugin add org.apache.cordova.file-transfer


下面完成第一步:
建立img元素,当点击该元素的时候跳转到#select_pic_page,#select_pic_page是个popup,
使用JQM是如下写法:
<div>
<a href="#select_pic_page" data-rel="popup" data-position-to="window" data-transition="pop"><img id="face" style="width:110px;height:110px;" src="img/default_face.jpg" /></a>
<div data-role="popup" id="select_pic_page" data-overlay-theme="a">
<ul data-role="listview" data-icon="false">
<li onclick="onFaceImgClick(0)" style="border-width:0;border-color:#666;border-bottom-width: 1px;"><a style="padding:16px;font-weight:normal;" href="#" data-rel="back">Take a picture</a></li>
<li onclick="onFaceImgClick(1)" style="border-width:0;"><a style="padding:16px;font-weight:normal;" href="#" data-rel="back">Select From Photo Library</a></li>
</ul>
</div>
</div>


phonegap+JQM拍照并上传头像到服务器

phonegap+JQM拍照并上传头像到服务器


点击popup中的选项,第一个是临时拍照,第二项是从图片库中选择,用flag区分。
function onFaceImgClick(flag){
// var w=$("#my_profile_page #face").width();
// var h=$("#my_profile_page #face").height();
var w=440;
var h=440;

var quality = device.platform=="Android"?100:50;
// log("device.platform="+device.platform+";quality====="+quality);
var cameraOptions;
if(flag==0){
cameraOptions={
quality : quality,//ios为了避免部分设备上出现内存错误,quality的设定值要低于50。
destinationType : Camera.DestinationType.FILE_URI,//FILE_URI,DATA_URL
sourceType : Camera.PictureSourceType.CAMERA,//CAMERA,SAVEDPHOTOALBUM
allowEdit : true,
encodingType : Camera.EncodingType.JPEG,//JPEG,PNG
targetWidth : w,
targetHeight : h
};
}else{
cameraOptions={
quality : quality,//ios为了避免部分设备上出现内存错误,quality的设定值要低于50。
destinationType : Camera.DestinationType.FILE_URI,//FILE_URI,DATA_URL
sourceType : Camera.PictureSourceType.PHOTOLIBRARY,//CAMERA,SAVEDPHOTOALBUM
allowEdit : true,
encodingType : Camera.EncodingType.JPEG,//JPEG,PNG
targetWidth : w,
targetHeight : h
};
}
navigator.camera.getPicture( onCameraSuccess, onCameraError, cameraOptions);
}


获取图片成功后执行回调函数onCameraSuccess,参数imageURI是拍照成功后返回的图片路径
function onCameraSuccess(imageURI){//imageData
// log("data==="+imageURI);
// $("#my_profile_page #face").attr("src","data:image/jpeg;base64," + imageData);

user.imgOriginalUrl=imageURI;
$("#my_profile_page #face").attr("src",user.imgOriginalUrl);
//拍照成功后,需要上传文件
var fileName=imageURI.substr(imageURI.lastIndexOf('/') + 1);
var options = new FileUploadOptions();
options.fileKey = "fieldName";//图片域名!!!
if(fileName.indexOf('?')==-1){
options.fileName = fileName;
}else{
options.fileName = fileName.substr(0,fileName.indexOf('?'));
}

options.mimeType = "image/jpeg";
//options.mimeType = "multipart/form-data";
options.chunkedMode = false;

var params = {};
params.sid = user.sid;
params.fileType = "customer";
options.params = params;

var uri = encodeURI(BASE_URL+"phoneCustomer/updateCustomerInfo.action?sid="+user.sid+"&fileType=customer");

var ft = new FileTransfer();
ft.upload(imageURI, uri, onFileUploadSuccess, onFileUploadFail, options);
}

function onCameraError(message){
log('Failed because: ' + message);
}

function onFileUploadSuccess(result){
log("========onFileUploadSuccess===========");
// log("Code = " + result.responseCode+";Response = " + result.response+";Sent = " + result.bytesSent);
}
function onFileUploadFail(error){
log("code = "+error.code+";upload error source = " + error.source+";upload error target = " + error.target);
}



在ios中,如果点击无法调出camera,请务必执行一下命令cordova build ios
  • phonegap+JQM拍照并上传头像到服务器
  • 大小: 66.6 KB
  • phonegap+JQM拍照并上传头像到服务器
  • 大小: 65.2 KB