今天用phonegap和jquerymobile结合做了一个小的应用，这个应用很简单，就是几个按钮调用设备操作而已，以前单纯用PhoneGap做应用很丑。后来明白了，PhoneGap是一种工具，而jquerymobile则是用来美化，看截图
首页上有两个按钮，开始和退出，点击按钮时，页面跳转到下一个页面。
这个页面上可以回到上一页，跳转到下一页，并且通过调用phoneGap，可以获取设备在x，y，z上的加速度
在第三页上，通过调用phoneGap实现对照相机的调用，以及从设备的图库中获取图像
在最后一页上，实现检查设备网络连接状态的检查工作。
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta charset="utf-8"&
&title&Capture Photo&/title&
&script src="jquery-1.7.2.min.js"&&/script&
&script src="jquery.mobile-1.1.0.min.js"& &/script&
&link rel="stylesheet" href="jquery.mobile-1.1.0.min.css"&
&script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"&&/script&
&script type="text/javascript" charset="utf-8"&
var pictureS
// picture source
var destinationT // sets the format of returned value
// Wait for Cordova to connect with the device
document.addEventListener("deviceready",onDeviceReady,false);
// Cordova is ready to be used!
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceT
destinationType=navigator.camera.DestinationT
function checkConnection() {
var networkState = navigator.network.connection.
var states = {};
states[Connection.UNKNOWN]
= 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI]
= 'WiFi connection';
states[Connection.CELL_2G]
= 'Cell 2G connection';
states[Connection.CELL_3G]
= 'Cell 3G connection';
states[Connection.CELL_4G]
= 'Cell 4G connection';
states[Connection.NONE]
= 'No network connection';
alert('Connection type: ' + states[networkState]);
function onSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: '
+ acceleration.timestamp + '\n');
// onError: Failed to get the acceleration
function onError() {
alert('onError!');
// Called when a photo is successfully retrieved
function onPhotoDataSuccess(imageData) {
// Uncomment to view the base64 encoded image data
// console.log(imageData);
// Get image handle
var smallImage = document.getElementById('smallImage');
// Unhide image elements
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
smallImage.src = "data:image/base64," + imageD
// Called when a photo is successfully retrieved
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
// console.log(imageURI);
// Get image handle
var largeImage = document.getElementById('largeImage');
// Unhide image elements
largeImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
largeImage.src = imageURI;
// A button will call this function
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL });
// A button will call this function
function GetAcceleration()
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
destinationType: destinationType.DATA_URL });
// A button will call this function
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
// Called if something bad happens.
function onFail(message) {
alert('Failed because: ' + message);
function Exit()
navigator.app.exitApp();
&section id="homepage" data-role="page"&
&header data-role="header"&
&h1&Homepage&/h1&
&div class="content" data-role="content"&
&p&This is a JqueryMoblie with PhoneGap example, click the button below operating&/p&&/br&
&a href="#secondpage" data-role="button"&Start&/a&
&button data-role="button" onclick="Exit();"&Exit&/button&
&/section&
&section id="secondpage" data-role="page"&
&header data-role="header"&
&h1&SecondPage&/h1&
&div class="content" data-role="content"&
&p&On this page, you can obtain the acceleration of the mobile phone in the x, y, and z directions, click the button below to try it&/p&&/br&
&a href="#homepage" data-role="button"&PreviosPage&/a&
data-role="button" onclick = "GetAcceleration()"&GetAcceleration&/button&
&a href="#thirdpage" data-role="button"&NextPage&/a&
&button data-role="button" onclick="Exit();"&Exit&/button&
&/section&
&section id="thirdpage" data-role="page"&
&header data-role="header"&
&h1&ThirdPage&/h1&
&div class="content" data-role="content"&
&p&On this page, you can take a picture or you can get on the phone photos,
&/br&the photos will be displayed on this page, click the button below to try it&/p&&/br&
&a href="#secondpage" data-role="button"&PreviousPage&/a&
data-role="button" onclick="capturePhoto();"&Capture Photo&/button&
data-role="button" onclick="getPhoto(pictureSource.PHOTOLIBRARY);"&From Photo Library&/button&
&img style="display:width:260height:260" id="smallImage" src="" /&
&img style="display:" id="largeImage" src="" /&
&a href="#forthpage" data-role="button"&NextPage&/a&
&button data-role="button" onclick="Exit();"&Exit&/button&
&/section&
&section id="forthpage" data-role="page"&
&header data-role="header"&
&h1&Forthpage&/h1&
&div class="content" data-role="content"&
&p&On this page, you can check the network status, click the button below to try it&/p&&/br&
&a href="#thirdpage" data-role="button"&PreviousPage&/a&
data-role="button" onclick="checkConnection();"&CheckConnection&/button&
&a href="#homepage" data-role="button"&BacktoHomepage&/a&
&button data-role="button" onclick="Exit();"&Exit&/button&
&/section&
& 著作权归作者所有
人打赏支持
码字总数 895
不错。。学习了
评论删除后，数据将无法恢复
今天用phonegap和jquerymobile结合做了一个小的应用，这个应用很简单，就是几个按钮调用设备操作而已，以前单纯用PhoneGap做应用很丑。后来明白了，PhoneGap是一种工具，而jquerymobile则是用...
要说hybrid app 框架的典范，Phonegap和AppCan无疑是最受大家关注的。先说明，本人是App的开发者，对手机上的web app也研究一段时间。本文以技术角度去阐述一个事实：为什么AppCan比Phonega...
迷途d书童 ?
应用名称：kLink通讯录 应用URL地址：http://klink.sturgeon.mopaas.com/ 应用说明及使用场景： kLink是一个简单、直接、纯粹的通讯录应用，支持PC浏览器、android、ios、windows phone等平台...
不废话，直接上代码，修改前的代码： &span style="font-size:"&&span style="font-size:"&&span style="font-size:"&&html&&head&&title&密码修改&/title&&meta http-......
peizhenfly ?
应用名称：IAB (我爱读书) 应用URL地址：http://iab.sturgeon.mopaas.com/ 应用说明及使用场景： 一个在线读书的应用，把平时自己收藏的电子书，转成了在线版的，在线阅读的同时会记录上次的...
工号1024 ?
最近在做移动开发，想尝试PhoneGap混合框架。you know PhoneGap + JqueryMobile 加载速度非常之满。如果再使用Android原生模拟机 、、OMG、、我宁愿退出码农界！！幸好有神器Genymotion，启动...
JayPark不作死 ?
本文将介绍，如何利用JqueryMobile调用优酷API JSON接口显示视频数据。 （1）注册用户接口。 首页，到 http://open.youku.com 注册一个账户，并通过验证。然后找到API接口 （http://open.you...
嘻哈开发者 ?
关于移动应用为什么用PhoneGap和jQuery Mobile本文不再赘述，有兴趣的童鞋可以自行问“度娘”，有很多这方面的文章。本文主要介绍PhoneGap&jQuery Mobile移动应用开发环境的具体配置。 　　P...
幸福2胖纸 ?
你每天都会对着它讲话，和它玩游戏，用它看新闻——没错，它就是你裤兜里的智能手机。android，黑莓还是iphone？为了让你清楚意识到究竟哪些才算是智能手机，我在下面总结了一个智能手机系统...
JK_OPERA ?
1、超链接： a标签链接分为内链 和 外链； 如果页面是在同一个页面，跳转直接href="#idname"即可； 如果是多个页面，内链是无法重新加载phonegap,需要加上rel="external"以重新加载(full rel...
没有更多内容
加载失败，请刷新页面
要区分js对象与json字符串 json实际就是js对象的文本表示形式（字符串） ajax提交数据时，data中需要写的是js对象，而不是json。 使用JSON.stringify()得到的就是json（字符串），而不是js对...
城市之雾 ? 23分钟前 ?
import socket import os import hashlib server=socket.socket() server.bind(('127.0.0.1',6969)) server.listen() while True: # 保证能与多个通话 conn,addr = server.accept() print('与......
南桥北木 ? 25分钟前 ?
爬取糗事百科的数据 def getData(url):
req = urllib.request.Request(url)
req.add_header("User-Agent", "Moz+illa/5.0 (Windows NT 6.1; WOW64) AppleWebKit......
android-key ? 32分钟前 ?
查看连接类型，默认是 com.mysql.jdbc.JDBC4Connection@7d0332e1
public void conn() {
session.doWork(new Work() {
publi......
阿豪boy ? 38分钟前 ?
ocr https://github.com/rmtheis/tess-two 例子并没有拷贝训练数据，需要下载训练数据到sd卡 java import android.content.Iimport android.graphics.Bimport android.graphi......
zdglf ? 46分钟前 ?
静默行 ? 51分钟前 ?
RPC处理的就是远程服务的调用，一个消费者通过网络调用一个提供者。而单消费者和单提供者解决不了项目的高负载，延伸出的RPC框架增加了注册中心，从而对多个消费者和提供者进行协调。而消费者...
青离 ? 52分钟前 ?
Array 对象属性 属性 描述 constructor 返回对创建此对象的数组函数的引用。 length 设置或返回数组中元素的数目。 prototype 使您有能力向对象添加属性和方法。 Array 对象方法 方法 描述 ...
ZHAO_JH ? 52分钟前 ?
企业级 JavaScript 数据网格 ag-Grid 发布 18.1.0 版本 https://www.oschina.net/news/97716/ag-grid-18-10-released...
mdoo ? 55分钟前 ?
产品经理每天的工作中少不了和技术各种交流和探讨，如何做到有理有据并确保技术理解透彻，这很关键，下面，我将从用户体验五要素作为切入点，分析产品各阶段的输出产物到底是什么，并如何传达...
黑魔法 ? 今天 ?
没有更多内容
加载失败，请刷新页面
文章删除后无法恢复，确定取消删除此文章吗？
亲，自荐的博客将通过私信方式通知管理员，优秀的博客文章审核通过后将在博客推荐列表中显示
确定推荐此文章吗？
确定推荐此博主吗？
聚合全网技术文章，根据你的阅读喜好进行个性推荐
指定官方社区
深圳市奥思网络科技有限公司版权所有使用JQueryMobile + PhoneGap 做的手机应用有哪些著名的呢_百度知道
使用JQueryMobile + PhoneGap 做的手机应用有哪些著名的呢
我有更好的答案
应该没有吧，著名的应该不会用JQueryMobile来做。起码都用ionic
采纳率：63%
来自团队：
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。使用 JQueryMobile + PhoneGap 做的手机应用有哪些著名的呢？国内有吗？ 如何能区分一款应用是 JQueryMobile 制作还是原生应用呢？ - 知乎有问题，上知乎。知乎作为中文互联网最大的知识分享平台，以「知识连接一切」为愿景，致力于构建一个人人都可以便捷接入的知识分享网络，让人们便捷地与世界分享知识、经验和见解，发现更大的世界。272被浏览<strong class="NumberBoard-itemValue" title="8分享邀请回答41 条评论分享收藏感谢收起jqueryMobile+phoneGap
经过了一段时间的学习，初步了解了该如何使用jQuery Mobile和 Phone Gap来开发一个Android应用程序，也想把这些东西介绍给大家。
1、 软件准备
要进行android app的开发，当然需要准备Java, eclipse和安装Android SDK，这个部分网络上面很多方法，搜索“安装Android SDK”即可找到很多答案，所以就不再这里浪费口水。
2、 知识准备
（1）了解jQuery Mobile这个js框架，知道怎么组织一个简单的页面。
官方网站：http://jquerymobile.com/（记得下载一个js库文件）
（2）了解Phone Gap，怎么利用Phone Gap在后面的内容也有介绍。
官方网站：http://phonegap.com/（同样记得下载相关文件）
（3）能够使用jQuery进行开发。
3、 组织工程目录
（1）打开Eclipse，建立一个android应用工程，见下图
（2）解压phonegap的压缩包，可以看到它针对不懂的应用类型进行了不同的分类，有android、IOS、Windows Phone等移动终端系统，打开其中的android文件夹。
（3）在刚才新建的工程的根目录下新建一个名为libs的文件夹，找到（1）中android文件夹中的jar包粘贴到刚才的libs文件夹下。
（4）将（1）中android文件夹下的xml文件夹整个粘贴到工程更目录下的res文件夹下。
（5）在工程的assets文件夹下新建文件夹www，这个文件夹其实可以看作是phonegap的工程目录，用来放js或者html文件。
（6）在文件夹www下面新建一个js文件夹，用来放置js和css文件；新建文件夹pages用来放置html文件。（新建html和引入js库可以参照图操作）
工程目录如下图：
4　Conding
（１）首先打开src下的Java类，修改继承类为DroidGap（如果找不到这个类，估计是忘记将PhoneGap的jar包加入工程的Libraries），并且修改代码，如下图
（2）打开index.html文件，进行编辑，记得开头要用html5的doctype声明。我在里面加入两个简单的jQuery Mobile的页面，并且调用了简单的Phone Gap的API：
http://docs.phonegap.com/en/1.3.0/phonegap_notification_notification.md.html#notification.vibrate
代码如下：
&!Doctype html
Phone Gap Introduce
http-equiv="Content-Type"
content="text/ charset=utf-8"
rel="stylesheet"
type="text/css"
href="../JS/jquery.mobile-1.0rc1.min.css"
type="text/javascript"
src="../JS/jquery_1_6_4.js"
type="text/javascript"
src="../JS/phonegap-1.2.0.js"
type="text/javascript"
src="../JS/jquery.mobile-1.0rc1.js"
type="text/javascript"
$('#PageOne').live('pageinit', function(event){
var showTip =
function(){
navigator.notification.alert("this is a message from page one!", null, "Message", "Close");
$(this).die("click");
var confirm =
function(){
navigator.notification.confirm(
'You are the winner!',
// message
// callback to invoke with index of button pressed
'Game Over',
'Restart,Exit'
// buttonLabels
$(this).die("click");
var redirectPage =
function(){
$.mobile.changePage("#PageTwo");
$(this).die("click");
$(event.target).find('#alert').bind('click', showTip);
$(event.target).find('#confirm').bind('click', confirm);
$(event.target).find('#changePage').bind('click', redirectPage);
$('#PageTwo').live('pageshow', function(event){
var showTip =
function(){
navigator.notification.alert("this is a message from page two!", null, "Message", "Close");
$(this).die("click");
var confirm =
function(){
navigator.notification.confirm(
'You are the losser!',
// message
// callback to invoke with index of button pressed
'Game Over',
'Restart,Exit'
// buttonLabels
$(this).die("click");
$(event.target).find('#alert').bind('click', showTip);
$(event.target).find('#confirm').bind('click', confirm);
id="PageOne"
data-role="page"
data-role="header"
data-backbtn="false"
Phone Gap One
data-role="content"
id="alert"
data-role="button"
data-theme="b"Alert
id="confirm"
data-role="button"
data-theme="b"Confirm
id="changePage"
data-role="button"
data-theme="b"Change Page
data-role="footer"
data-role="navbar"
href="#PageOne"Page One
href="#PageTwo"Page Two
id="PageTwo"
data-role="page"
data-role="header"
data-backbtn="true"
Phone Gap Two
data-role="button"
data-rel="back"Previous
data-role="content"
id="alert"
data-role="button"
data-theme="b"Alert
id="confirm"
data-role="button"
data-theme="b"Confirm
href="file:///android_asset/www/Pages/pageThree.html"
data-role="button"
data-theme="b"Page Three
data-role="footer"
data-role="navbar"
href="#PageOne"Page One
href="#PageTwo"Page Two
&!Doctype html&
&title&Phone Gap Introduce&/title&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"/&
&link rel="stylesheet" type="text/css" href="../JS/jquery.mobile-1.0rc1.min.css"/&
&script type="text/javascript" src="../JS/jquery_1_6_4.js"&&/script&
&script type="text/javascript" src="../JS/phonegap-1.2.0.js"&&/script&
&script type="text/javascript" src="../JS/jquery.mobile-1.0rc1.js"&&/script&
&script type="text/javascript"&
$('#PageOne').live('pageinit', function(event){
var showTip = function(){
navigator.notification.alert("this is a message from page one!", null, "Message", "Close");
$(this).die("click");
var confirm = function(){
navigator.notification.confirm(
'You are the winner!',
// message
// callback to invoke with index of button pressed
'Game Over',
'Restart,Exit'
// buttonLabels
$(this).die("click");
var redirectPage = function(){
$.mobile.changePage("#PageTwo");
$(this).die("click");
$(event.target).find('#alert').bind('click', showTip);
$(event.target).find('#confirm').bind('click', confirm);
$(event.target).find('#changePage').bind('click', redirectPage);
$('#PageTwo').live('pageshow', function(event){
var showTip = function(){
navigator.notification.alert("this is a message from page two!", null, "Message", "Close");
$(this).die("click");
var confirm = function(){
navigator.notification.confirm(
'You are the losser!',
// message
// callback to invoke with index of button pressed
'Game Over',
'Restart,Exit'
// buttonLabels
$(this).die("click");
$(event.target).find('#alert').bind('click', showTip);
$(event.target).find('#confirm').bind('click', confirm);
&div id="PageOne" data-role="page"&
&div data-role="header" data-backbtn="false"&
&h1&Phone Gap One&/h1&
&div data-role="content"&
&a href="#" id="alert" data-role="button" data-theme="b"&Alert&/a&
&a href="#" id="confirm" data-role="button" data-theme="b"&Confirm&/a&
&a href="#" id="changePage" data-role="button" data-theme="b"&Change Page&/a&
&div data-role="footer"&
&div data-role="navbar"&
&li&&a href="#PageOne"&Page One&/a&&/li&
&li&&a href="#PageTwo"&Page Two&/a&&/li&
&div id="PageTwo" data-role="page"&
&div data-role="header" data-backbtn="true"&
&h1&Phone Gap Two&/h1&
&a data-role="button" data-rel="back"&Previous&/a&
&div data-role="content"&
&a href="#" id="alert" data-role="button" data-theme="b"&Alert&/a&
&a href="#" id="confirm" data-role="button" data-theme="b"&Confirm&/a&
&a href="file:///android_asset/www/Pages/pageThree.html" data-role="button" data-theme="b"&Page Three&/a&
&div data-role="footer"&
&div data-role="navbar"&
&li&&a href="#PageOne"&Page One&/a&&/li&
&li&&a href="#PageTwo"&Page Two&/a&&/li&
要特别注意的是引入js库的顺序，参照下图：
即：自己的包和phonegap的js包要放在中间，不然会出一些错误，我开发的时候是遇见过这种状况的，而且jQuery Mobile的官方也是这么要求的。
再打开pageThree.html，加入如下代码：
id="PageThree"
data-role="page"
data-role="header"
data-backbtn="true"
Phone Gap Three
data-role="button"
data-rel="back"Previous
data-role="content"
id="alert"
data-role="button"
data-theme="b"Alert
id="confirm"
data-role="button"
data-theme="b"Confirm
data-role="footer"
data-role="navbar"
href="#PageOne"Page One
href="#PageTwo"Page Two
&div id="PageThree" data-role="page"&
&div data-role="header" data-backbtn="true"&
&h1&Phone Gap Three&/h1&
&a data-role="button" data-rel="back"&Previous&/a&
&div data-role="content"&
&a href="#" id="alert" data-role="button" data-theme="b"&Alert&/a&
&a href="#" id="confirm" data-role="button" data-theme="b"&Confirm&/a&
&div data-role="footer"&
&div data-role="navbar"&
&li&&a href="#PageOne"&Page One&/a&&/li&
&li&&a href="#PageTwo"&Page Two&/a&&/li&
选择工程，右键run as & android application，你应该能够看到下图：
到这里工程的开发已经完了，希望有兴趣的可以具体操作一遍，然后可以修修改改其中的一些东西，这样才能体会到这个开发过程是怎么一回事，光看和复制粘贴是很容易忘记怎么去开发的。
在我进行了一段时间的开发之后，我认为phonegap的好处在于：
（1）一个应用能够很容易就移植到其他的平台，不需要同样的逻辑写多种语言版本；
（2）容易上手，学习了html5和js既可以进行开发；
（3）如果学会了如何开发phonegap插件，那么android能够做的事情，phonegap都能够帮你完成，其他平台开发也如此。（如何开发插件已经不是这篇blog的内容了）
同时我感觉phonegap让我最不爽的一点就是调试太麻烦了，要在模拟器上才能看到效果到底对不对。
同时附上开发简易顺序：
（1）把phonegap的jar包和xml文件放到工程下的正确目录；
（2）修改src下的android默认类，参照4 （1）；
（3）在aseets下面建立工程的根目录www，并在其中放入js、html、image、css等普通的web文件；
（4）只需要在index页面加入js包和css文件，其他页面只需要组织成一个简单的jQuery Mobile页面。
（5）调用一些特殊的api时，需要注意申请android许可！（百度一下就可以轻松解决）
最后一个压缩包是工程压缩包。
没有更多推荐了，如果无行动，一切将是梦。
Phonegap jQueryMobile 在线应用拍照、相册选择上传+预览
拍照上传以及从相册中选择图片上传是大多数手机应用的典型功能，这几天在做一个移动端的项目，其中就用到该功能。
项目技术选择的是Phonegap+jQueryMobile，因为jQuery自己比较熟悉，用jQueryMobile没有什么大的难点。
界面用jQueryMobile搭的很快，一开始打算用Phonegap将应用做为离线版本，但后来发现离线版本升级的话还是和普通的app一样，都需要重新安装，这就没有了WebApp的优势和亮点，故最终选择了在线版本，即将项目作为一个web应用，用Tomcat发布在服务器上，Phonegap作为一个app外壳行使浏览器功能在其中请求服务器上的页面等资源。
做该功能的时候，由于对于Phonegap接触不久，花了我整整两天的时间，这两天没有做其他的，一直在研究如何实现图片预览，网上、官网有很多成功的例子，但没有一个在我这边成功预览的，几乎看遍了网上所有的帖子，点坏了鼠标！心情坏到了极点，因为本以为很简单的东西，而后网上说的也都很简单，很多帖子都是一样的内容，但是我却死活跑不通，崩溃！
到最后，才发现问题原来出在我的“在线”应用上，无语，其实做J2EE的我深知浏览器端是无权限操作本地文件的，但是由于对Phonegap的不了解，由于知道Phonegap可以直接操作本地资源，误认为用了Phonegap就无敌了，你以为呢！于是我就把WebApp整成离线的试下喽，果然，可以显示了！
但项目已经做到这个地步了，再把它重构成离线的？不可取。于是我就开始分析了。。。
Phonegap不是可以操作本地文件吗？html中的img标签不能根据本地图片路径渲染图片，但它可以不用文件路径啊！于是呵呵了。
最终解决方案是用Phonegap的FileReader来根据本地图片路径以base64的形式读取其内容，base64是可以直接在img标签上渲染的，所以问题就解决了。
下面截取拍照上传以及预览的代码如下：
图片处理代码：
var picUrl = "" ;
function capturePhotoUrl() {
navigator.camera.getPicture(onCaptureSuccess, onUrlFail, {
quality : 80,
allowEdit : true,//在Android中此配置忽略
destinationType : Camera.DestinationType.FILE_URI,
sourceType:Camera.PictureSourceType.CAMERA,
targetWidth : 800, // 生成的图片大小 单位像素
targetHeight : 640
function onCaptureSuccess(imageURI) {
picUrl = imageURI;
//这是关键部分
window.resolveLocalFileSystemURI(imageURI, function(fileEntry){
fileEntry.file( function(file){
var reader = new FileReader();
reader.onloadend = function(evt) {
$( "#uploadImgDom").append("&img path='"+imageURI+"' class='uploadImg' src='"+evt.target.result+"' /&");
$( "#report-page").trigger("create" );
reader.readAsDataURL(file);
}, readFileFail);
}, readFileFail);
$("#urlinfo").text("图片的原始路径" + imageURI);
function readFileFail(evt){
navigator.notification.alert( "文件读取失败，原因：" + evt.code, null, "警告" );
function onUrlFail(message) {
navigator.notification.alert( "失败，原因：" + message, null, "警告" );
function loadImageLocal() {
navigator.camera.getPicture(onLoadSuccess, onUrlFail, {
quality : 80,
sourceType : Camera.PictureSourceType.PHOTOLIBRARY,
destinationType : Camera.DestinationType.FILE_URI,
encodingType : Camera.EncodingType.JPEG,
mediaType : Camera.MediaType.PICTURE,
targetWidth : 800, // 生成的图片大小 单位像素，选择图片的时候一定要制定这个值，否则
targetHeight : 640
function onLoadSuccess(imageURI) {
imageURI = imageURI + ".jpg";
picUrl = imageURI;
window.resolveLocalFileSystemURI(imageURI, function(fileEntry){
fileEntry.file( function(file){
var reader = new FileReader();
reader.onloadend = function(evt) {
$( "#uploadImgDom").append("&img path='"+imageURI+"' class='uploadImg' src='"+evt.target.result+"' /&");
$( "#report-page").trigger("create" );
reader.readAsDataURL(file);
}, readFileFail);
}, readFileFail);
$("#urlinfo").text("图片的原始路径" + picUrl);
function uploadPhoto() {
$("#report-btn").attr({ "disabled": "disabled"});
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = picUrl.substr(picUrl.lastIndexOf( '/') + 1);
options.mimeType = "image/jpeg";
var ft = new FileTransfer(); //文件上传类
ft.onprogress = function (progressEvt) { //显示上传进度条
if (progressEvt.lengthComputable) {
navigator.notification.progressValue(Math.round(( progressEvt.loaded / progressEvt.total ) * 100));
navigator.notification.progressStart( "提醒", "当前上传进度" );
var params = new Object();
params.title = $( "#textinput-2").val();
params.info = $( "#textarea-2").val();
params.longitude = $( "#longitude").text();
params.latitude = $( "#latitude").text();
options.params =
ft.upload(picUrl, basePath+ "/report", win,
fail, options);
function win(r) {
navigator.notification.progressStop(); //停止进度条
$("#returnpic").attr( "src",
basePath+ "/files/" + r.response);
$("#returninfo").html(
"上传成功\n：反馈的信息:r.responseCode:" + r.responseCode + "\nr.response:"
+ r.response + "\nr.bytesSent:" + r.bytesSent);
$("#report-btn").removeAttr( "disabled");
navigator.notification.alert( "上传成功！" , function(){
$( "#reportPageBackBtn").click();
}, "提醒");
function fail(error) {
* FileTransferError.FILE_NOT_FOUND_ERR：1 文件未找到错误。
* oFileTransferError.INVALID_URL_ERR：2 无效的URL错误。
* oFileTransferError.CONNECTION_ERR：3 连接错误。 FileTransferError.ABORT_ERR =
* 4; 程序异常
var errorcode = error.
var errstr = "";
switch (errorcode) {
errstr = "错误代码1：源文件路径异常，请重新选择或者拍照上传！" ;
errstr = "错误代码2:目标地址无效,请重试！" ;
errstr = "您手机或者后台服务器网络异常,请重新上传！" ;
default: {
errstr = "程序出错";
$("#returninfo").text(
"上传失败,错误代码:" + errstr + "上传源文件:" + error.source + "目标地址:"
+ error.target + "请重新上传！" );
$("#report-btn").removeAttr( "disabled");
前台显示代码：
&div role= "main" class = "ui-content jqm-content" data-iscroll ="content" &
&div class = "ui-grid-a"&
&div class = "ui-block-a"&
&a href = "#" onclick ="capturePhoto()" class = "ui-shadow ui-btn ui-btn-b ui-corner-all ui-btn-icon-left ui-icon-camera"& 拍照&/ a&
&div class = "ui-block-b"&
&a href = "#" onclick ="loadImageLocal()" class= "ui-shadow ui-btn ui-btn-b ui-corner-all ui-btn-icon-left ui-icon-heart"& 相册&/a&
&div id = "returninfo"&&/ div&
&div id = "uploadImgDom"&
后台上传的代码就不贴了，就一个Servlet。
谨记我这两天的精彩编程生活。
最后感谢所有网友的帮助与分享！
没有更多推荐了，