我是 Phonegap 开发的新手，并且一直坚持提交表单和图片。我搜索过其他文章，似乎没有文章介绍提交表单数据和图像。
到目前为止我所拥有的是一个HTML页面，您可以在其中拍摄照片（相机）或从库中选择一个。下面是一个表格。在触摸表单中的“发送”按钮后，我想将表单和图像的数据发送到PHP服务器。表单工作正常并且内容被带到服务器，当我尝试将Base64图像数据作为变量包含时，发送到服务器的信息是 [object HTMLCollection] 而不是数据本身。 / p>
代码：
var pictureSource; // picture source
var destinationType; // 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.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// 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/jpeg;base64," + imageData;
}
// 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 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('Mislukt: ' + message);
}
HTML：
<div class="container">
<div class="contactForm" id="contactForm">
<form id="contact">
<fieldset>
<label for="contactName" id="name_label">Naam (vereist)</label>
<input type="text" name="contactName" id="contactName" size="30" value="" class="text-input" />
<span class="error" id="nameError">Geef uw naam op!</span>
<label for="contactEmail" id="email_label">Email (vereist)</label>
<input type="text" name="contactEmail" id="contactEmail" size="30" value="" class="text-input" />
<span class="error" id="emailError">Geef uw e-mailadres op!</span> <span class="error" id="emailError2">Please enter a valid email address !</span>
<label for="contactMessage" id="message_label">Locatie (vereist)</label>
<textarea name="contactMessage" id="contactMessage" class="text-input"> </textarea>
<span class="error" id="messageError">Geef de locatie op!</span>
<label for="contactProbleem" id="probleem_label">Probleem (vereist)</label>
<textarea name="contactProbleem" id="contactProbleem" class="text-input"></textarea>
<span class="error" id="messageError">Geef het probleem in!</span>
<input type="hidden" id="largeImage" name="largeImage" />
<p class="contact-button-house">
<input type="submit" name="submitMessage" class="full-screen-button contactButton button grey" id="contactSubmitBtn" value="Send"/>
</p>
</fieldset>
</form>
JS文件：
jQuery(function() {
jQuery('.error').hide();
jQuery(".contactButton").click(function() {
// validate and process form
// first hide any error messages
jQuery('.error').hide();
var name = jQuery("input#contactName").val();
if (name == "") {
jQuery("span#nameError").show();
jQuery("input#contactName").focus();
return false;
}
var email = jQuery("input#contactEmail").val();
if (email == "") {
jQuery("span#emailError").show();
jQuery("input#contactEmail").focus();
return false;
}
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(email)) {
jQuery("span#emailError2").show();
jQuery("input#contactEmail").focus();
return false;
}
var msg = jQuery("textarea#contactMessage").val();
if (msg == "") {
jQuery("span#messageError").show();
jQuery("textarea#contactMessage").focus();
return false;
}
var prob = jQuery("textarea#contactProbleem").val();
if (prob == "") {
jQuery("span#messageError").show();
jQuery("textarea#contactProbleem").focus();
return false;
}
var dataString = 'name='+ name + '&email=' + email + '&msg=' + msg + '&prob=' + prob + '&largeImage=' + largeImage;
//alert (dataString);return false;
jQuery.ajax({
type: "POST",
url: "http://serverurl/script.php",
data: dataString,
success: function() {
jQuery('#contactForm').html("<div id='successMessage' style='margin-top:47px;'></div>");
jQuery('#successMessage').html("<img src='images/ok.png' alt='' style='float:left; margin-top:4px; margin-right:10px;'/><strong style='float:left;'>Thank you for contacting us!</strong>")
.append("<p style='float:left;'>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
jQuery('#successMessage');
});
}
});
return false;
});
});
任何想法我做错了什么？非常感谢帮助！感谢。
答案 0 :(得分：0)
在您的dataString中，您发送了一个largeImage变量，该变量由
var largeImage = document.getElementById('largeImage');
因此它是一个JS对象而不是你需要的东西。
我还看到您在src方法中将图像数据分配到largeImage onPhotoURISuccess属性。根据您的 HTML ，largeImage的类型为输入，因此我建议您将其更改为<img />代码，然后使用{{组成`dataString。
src