自周五以来，我一直在努力完成这项工作，搜索谷歌和这里。我的最终目标是能够拍摄多张带有标题和描述的照片并将它们上传到服务器，然后显示在网页上。
到目前为止我所拥有的是：给一张图片一个标题和描述，浏览画廊，找到一张图片并选择它的能力。但是当我这样做时，图像会立即与表单一起上传。我希望能够使用提交按钮来做到这一点。
我也有一个按钮来拍摄图像，并出现页面上图像的预览。但是当我用相机拍照时，我不知道如何上传我的表格。我能够使用 div 和 innerHTML 调用将图像数据打印到屏幕上......但老实说，我很迷茫，甚至不知道从哪里开始发布特定的代码片段。我将发布整个页面，因为它目前存在......
<html>
<head>
<title>File Transfer Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
function browse(){
navigator.camera.getPicture(uploadPhoto,
function(message) { alert('get picture failed'); },
{ quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY }
);
}
function uploadPhoto(imageURI) {
var options = new FileUploadOptions();
options.fileKey="file";
options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
options.mimeType="image/jpeg";
var params = {};
params.value1 = "test";
params.value2 = document.getElementById('file_name').value + "";
params.value3 = document.getElementById('file_description').value + "";
options.params = params;
var ft = new FileTransfer();
ft.upload(imageURI, encodeURI("http://site.com/pages/upload.php"), win, fail, options);
}
function win(r) {
console.log("Code = " + r.responseCode);
console.log("Response = " + r.response);
console.log("Sent = " + r.bytesSent);
}
function onFileSystemSuccess(fileSystem) {
console.log(fileSystem.name);
}
function onResolveSuccess(fileEntry) {
console.log(fileEntry.name);
}
function fail(evt) {
console.log(evt.target.error.code);
}
function fail(error) {
alert("An error has occurred: Code = " + error.code);
console.log("upload error source " + error.source);
console.log("upload error target " + error.target);
}
function capturePhoto() {
// 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 });
}
function onPhotoDataSuccess(imageData) {
// console.log(imageData);
var smallImage = document.getElementById('smallImage');
smallImage.style.display = 'block';
smallImage.src = "data:image/jpeg;base64," + imageData;
var smallTEXT = document.getElementById('smallTEXT');
smallTEXT.style.display = 'block';
smallTEXT.innerHTML = "data:image/jpeg;base64," + imageData;
}
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';
largeImage.src = imageURI;
}
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 });
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
</head>
<body>
<h1>Example</h1>
<p>Upload File</p>
<form name ="filename" id="file_name_form" action="#">
Title <br><input type="text" name="name" id="file_name" /><br>
Description <br><textarea type="text" name="description" id="file_description" /></textarea>
</form>
<button onclick="capturePhoto();">Use Camera</button> <br>
<button onclick="browse();">browse gallery</button><br>
<img style="display:none;width:160px;" id="smallImage" src="" />
<hr>
<div id="smallTEXT">ggg</div>
<button onclick"uploadPhoto();">submit</button>
</body>