我一直遇到Cordova 3.4的问题，尤其是事件序列。
我想做的是基本的。
1）从图库中选择一个文件并发送到服务器 2）拍摄照片并发送到服务器
问题是从图库中选择文件后，它不会发送执行uploadPhoto例程。对于拍摄照片，你必须在实际发送到uploadPhoto例程之前拍摄3张图片。
我基本上在lubuntu 13.10“saucy”下使用cordova@3.4.0-0.1.3为Android构建。使用PLSX 1.0.9 ROM在Nexus 4中运行apk。
我的代码中有什么问题导致navigator.camera.getPicture中的成功（甚至失败）事件不能始终如一地触发吗？
我的index.html如下：
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>My Sample Program</title>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
var statusDom;
function uploadFromGallery(){
//alert("browsing gallery");
statusDom.innerHTML ="Preparing Gallery";
log_error("browsing gallery");
navigator.camera.getPicture(uploadPhoto, onFail,{ quality: 50, destinationType: destinationType.FILE_URI,
sourceType: pictureSource.PHOTOLIBRARY });
}
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
statusDom.innerHTML ="Preparing Camera";
log_error("capturing Photo");
navigator.camera.getPicture(uploadPhoto, onFail, { quality: 50, destinationType: destinationType.FILE_URI });
//navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,destinationType: destinationType.DATA_URL });
}
function uploadPhoto(imageURI) {
console.log("sending file:"+imageURI);
log_error("sending file:"+imageURI);
var options = new FileUploadOptions();
options.fileKey="upfile";
options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+".jpg");
options.mimeType="image/jpeg";
options.chunkedMode=0;
//options.chunkedMode = true; //this is important to send both data and files
//var headers={'Authorization':"Basic " + Base64.encode(username + ":" + password)};
//options.headers = headers;
log_error("filename = "+options.fileName)
var params = {};
params.usr_nam = "dummy@someserver.com";
options.params = params;
var statusDom=document.getElementById('status');
var ft = new FileTransfer();
ft.onprogress = function(progressEvent) {
if (progressEvent.lengthComputable) {
var perc = Math.floor(progressEvent.loaded / progressEvent.total * 100);
statusDom.innerHTML = perc + "% uploaded...";
} else {
if(statusDom.innerHTML == "") {
statusDom.innerHTML = "Uploading";
} else {
statusDom.innerHTML += ".";
}
}
};
ft.upload(imageURI, encodeURI("https://server_to_somewhere.com/file_capturing_code.php"), win, fail, options);//, 1);
}
function win(r) {
log_error("file sent successfully");
console.log(dump(r));
log_error(dump(r));
return false;
}
function fail(error) {
alert("An error has occurred: Code = " + error.code);
console.log(dump(r));
log_error(dump(r));
}
function onFail(message) {
alert('Failed because: ' + message);
log_error('Failed because: ' + message);
}
function log_error(message)
{
var mytextArea=document.getElementById('mini_console');
mytextArea.value=mytextArea.value+"\n"+message;
}
function dump(obj)
{
var out = '';
for (var i in obj) {
out += i + ": " + obj[i] + "\n";
}
return out;
}
</script>
</head>
<body>
<div class="app">
<h1>My Sample Program</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<button style="position:relative;top:50%;left:25%;width:200px" type="button" onclick="uploadFromGallery();">Upload from Gallery</button><br>
<button style="position:relative;top:50%;left:25%;width:200px" type="button" onclick="capturePhoto();">Upload from Camera</button><br>
<div>
<div></div>
<textarea style="position:relative;top:50%;left:25%;overflow-y:visible;height:60px;width:200px" id="mini_console" >Debug Panel</textarea>
</div><br/>
<div id="status"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
我的index.js是
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
statusDom=document.getElementById('status');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};