0

我是Phonegap开发的新手，在提交表单和图像时遇到了困难。我搜索了其他文章，似乎没有文章涉及提交表单数据和图像。

到目前为止，我得到的是一个 HTML 页面，您可以在其中拍照（相机）或从您的库中选择一个。下面是一个表格。触摸表单中的“发送”按钮后，我想将表单和图像的数据发送到 PHP 服务器。表单运行良好，内容被带到服务器，当我尝试将 Base64 图像数据包含为变量时，发送到服务器的信息是[object HTMLCollection]而不是数据本身。

编码：

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;
    });
});

任何想法我做错了什么？非常感谢您的帮助！谢谢。

4

1 回答 1

0

在您dataString发送一个largeImage变量，该变量由 

var largeImage = document.getElementById('largeImage');

因此它是一个 JS 对象，而不是你需要的。

我还看到您将图像数据分配给in方法的src属性。根据您的HTML，是input类型，所以我建议您也将其更改为tag ，然后在编写 `dataString.largeImageonPhotoURISuccesslargeImage<img />src

var dataString = 'name='+ name + '&email=' + email + '&msg=' + msg + '&prob=' + prob + '&largeImage=' + largeImage.src;
于 2013-02-27T10:52:40.647 回答