- 浏览: 5776833 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (890)
- WindowsPhone (0)
- android (88)
- android快速迭代 (17)
- android基础 (34)
- android进阶 (172)
- android高级 (0)
- android拾遗 (85)
- android动画&效果 (68)
- Material Design (13)
- LUA (5)
- j2me (32)
- jQuery (39)
- spring (26)
- hibernate (20)
- struts (26)
- tomcat (9)
- javascript+css+html (62)
- jsp+servlet+javabean (14)
- java (37)
- velocity+FCKeditor (13)
- linux+批处理 (9)
- mysql (19)
- MyEclipse (9)
- ajax (7)
- wap (8)
- j2ee+apache (24)
- 其他 (13)
- phonegap (35)
最新评论
-
Memories_NC:
本地lua脚本终于执行成功了,虽然不是通过redis
java中调用lua脚本语言1 -
ZHOU452840622:
大神://处理返回的接收状态 这个好像没有监听到 遇 ...
android 发送短信的两种方式 -
PXY:
拦截部分地址,怎么写的for(int i=0;i<lis ...
判断是否登录的拦截器SessionFilter -
maotou1988:
Android控件之带清空按钮(功能)的AutoComplet ...
自定义AutoCompleteTextView -
yangmaolinpl:
希望有表例子更好。。。,不过也看明白了。
浅谈onInterceptTouchEvent、onTouchEvent与onTouch
工作中需要将用户头像上传到服务器。
需要这么几步:
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
发表评论
-
JQ插件:radiosToSlider
2014-09-11 17:43 1327demo: http://rubentd.com/radios ... -
Javascript常用正则表达式集合
2014-09-06 22:08 14491.匹配正整数:/^[0-9]*[1-9][0-9]*$/ 2 ... -
关于CSS细节集合
2014-09-05 12:23 1363以后可能会用到,记一下 原址:http://www.iteye ... -
cordova插件InAppBrowser在iPhone上显示url和Done、Back/Forward键的问题
2014-09-02 14:11 11988I am currently building a News ... -
CSS实现简单动态渐变闪烁效果
2014-08-28 15:57 4039CSS练习用例: .event { border ... -
JQ插件:nicescroll自定义滚动条
2014-08-27 15:53 2058参考: http://www.areaaperta.com/n ... -
jquery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码
2014-08-27 14:55 1656<!DOCTYPE html PUBLIC &quo ... -
JQ插件:qrcode生成二维码
2014-08-27 14:51 7504jquery.qrcode.js 是把它用jquery方式封装 ... -
JQ插件:日期时间选择器date picker
2014-08-27 13:59 2383这个控件关键是它能支持在mobile中显示。iPhone和an ... -
JQ插件:Knob旋钮按钮
2014-08-27 10:33 2478在线演示 用法介绍: 分享一款超棒的jQuery旋钮插件 ... -
使用google map显示地图,并标注InfoWindow
2014-08-22 17:53 8120首先导入google map JS(需要VPN): <s ... -
JQM:如何点击footer中的navbar只切换content的内容
2014-08-22 10:53 5159在JQM运用中想固定Header与Footer,当然Foote ... -
各种JS jQuery CSS资源等
2014-08-15 23:53 13142014年最酷的30个JavaScript库 http://w ... -
CSS将图片和文字垂直居中
2014-08-15 16:56 1197这个问题说起来有点惭 ... -
jQuery 中使用 JSON
2014-08-15 11:29 3218在 jQuery 中已经提供了对于解析 JSON 的内在支持, ... -
JQM Toggle switch、selectmenu动态设置默认选中值时没有效果的问题
2014-08-14 13:21 2117静态时,ok,没问题,如下: <label for=&q ... -
cordova读写文件(2)
2014-08-13 17:53 3098上一篇讲的是如何将数据写入文件 这篇讲如何读取文件。 v ... -
cordova读写文件(1)
2014-08-13 17:44 23517使用cordova可以很方便的在手机sdcard中读写文件。 ... -
JQM自动提示插件autoComplete.js
2014-08-11 17:33 1326JQM自动提示插件: https://github.com/c ... -
Jquery mobile 新手问题总汇
2014-08-05 14:43 1479http://www.wglong.com/main/arti ...
相关推荐
HTML5+PhoneGAP+JQM门店源代码框架。 未完成,包括后台JSON部分。自己查找,后来我屏蔽掉了,但是效果是好的,由于模拟器太慢了,最后屏蔽了,但是代码可用。 开发环境Dreamweaver cs5.5.后台ASP.NET。
phoneGap是不会手机开发的人员可以进使用JS+html来进行手机开发 使程序员们可以跨编程语i言进行各种平台的手机开发了
phonegap性能优化 以及phonegap + Angularjs + ionic 移动app开发介绍
PhoneGap+开发指南
phonegap+jqueryMobilejs源码项目
PhoneGap+Jquery mobile,完整开发代码.
phonegap+websocket+tomcat实现移动终端推送功能 ,android版
该源码是使用phonegap加jquery mobile开发基于html5 css3的应用的项目例子。可以很好的来学校jquery mobile。
如果你不是研究phoneGap和sencha的就别下载啊!浪费你的积分了!
NULL 博文链接:https://guoqiantong.iteye.com/blog/1744129
phonegap+HTML+appframework入门应用 使用node.js搭建服务器,当客户端访问时返回json对象,客户端解析json对象并显示解析结果。文件夹中有使用说明
phonegap+jqueryMobile例子
jQuery+Mobile+和+PhoneGap+集成开发 教你如何轻松建一个手机版网页
Android Phonegap+HTML5+CSS3+jQuer简单界面模板示例及源码.zip源码资源下载Android Phonegap+HTML5+CSS3+jQuer简单界面模板示例及源码.zip源码资源下载
jqmobi+phonegap+手机触屏滑动效果js 动态设置手机高宽度
PhoneGap+jQueryMobile开发Android应用实例,搭建开发环境
Android Phonegap+HTML5+CSS3+jQuer简单界面模板示例及源码.rar
Android Phonegap+HTML5+CSS3+jQuer简单界面模板示例及源码.zip项目安卓应用源码下载Android Phonegap+HTML5+CSS3+jQuer简单界面模板示例及源码.zip项目安卓应用源码下载 1.适合学生毕业设计研究参考 2.适合个人学习...
用PhoneGap+jQueryMobile开发Android应用实例,很好的android开发学习教材。
phonegap+android--配置教程_files