工作中需要將用戶頭像上傳到服務器。
需要這么幾步:
1,點擊img元素彈出Popup,選擇拍照或從圖片庫中選擇圖片。
2,上傳圖片
在phonega中拍照需要camera插件。
上傳文件需要file-transfer插件。
我在工程中安裝的所有插件如下:
下面完成第一步:
建立img元素,當點擊該元素的時候跳轉到#select_pic_page,#select_pic_page是個popup,
使用JQM是如下寫法:
點擊popup中的選項,第一個是臨時拍照,第二項是從圖片庫中選擇,用flag區分。
獲取圖片成功后執行回調函數onCameraSuccess,參數imageURI是拍照成功后返回的圖片路徑
在ios中,如果點擊無法調出camera,請務必執行一下命令cordova build ios
需要這么幾步:
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>


點擊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
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
