使用phonegap提交数据和图像的表单

时间:2013-10-28 12:35:29

标签: php jquery mysql ajax cordova

我正在使用phonegap,html,ajax,jquery,mysql和php。

在我的Phonagep应用程序中,我的表单包含用户名,密码,userphoto。

我想从html页面提交此表单。让我们说register.html

表单数据应该发送到我的服务器上的一个名为services的文件夹中的php页面,让路径为“http://www.example.com/services/register.php”。

此页面应该处理mysql插入过程到同样服务器上传的数据库。

在这台服务器上我还有一个名为images的文件夹,其中应该上传用户图像,并且应该在mysql数据库中插入完整的浴缸。

我已尝试使用ajax将用户名和passowrd发布到此页面并插入数据。但是在使用serialize()时我遇到数据问题。

我也无法使用ajax上传图片?

我使用了这段代码..我在没有发送图像路径的情况下得到了用户名和密码的响应,但是在发送图像路径时没有任何反应

<html>
<head>
    <title>Basic Upload</title>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type='text/javascript' src='http://code.jquery.com/jquery-latest.pack.js'></script>
    <script type="text/javascript" charset="utf-8">


function sub(e){

var ft = new FileTransfer();   
var options = new FileUploadOptions();
options.fileKey="myImg";
options.fileName=$('#myImg').val();
options.mimeType="image/jpeg";  
options.mimeType="image/png"; 
options.chunkedMode = false;
var PATH = options.fileName;

var form_data= new Object();
form_data['user_name']= 'User';
form_data['password']= '1234';
form_data['user_image_path']= PATH;

var url = "http://localhost/stacktest/register.php"; 
$.getJSON(""+url+"?callback=?"+"&form_data="+JSON.stringify(form_data),
    function (response) {
        try {
            // Get Your Response
            alert(response);
        }
        catch(ex) {
            console.log(ex);
        }
   }
);

}
</script>
</head>
<body>

<form method="post" enctype="multipart/form-data" id="registerForm" onsubmit="sub(this.value);">

    <input type="file" name="myImg" id="myImg" />

    <input type="submit" value="Upload" name="submitButton" id="submitButton" />


</form>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

您应该使用PHP Web Service与Json执行以下任务

访问Web服务,如: -

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>  
var PATH = 'Image Path';
var form_data= new Object();
form_data['user_name']= 'User';
form_data['password']= '1234';
form_data['user_image_path']= PATH;

var url = "http://localhost/stacktest/register.php";
$.getJSON(""+url+"?callback=?"+"&form_data="+JSON.stringify(form_data),
    function (response) {
        try {
            // Get Your Response
            alert(response);
        }
        catch(ex) {
            console.log(ex);
        }
   }
);
</script> 

创建PHP Web服务(register.php),如: -

<?php
$form_data = json_decode(stripslashes($_GET["form_data"]));
$user_name = $form_data->user_name;
$password = $form_data->password;
$user_image_path = $form_data->user_image_path;

//Perform Your Task like Insert into Database etc

$res= 'Your Response which you want to return'; 
echo $_GET["callback"].'('.json_encode($res).')';

答案 1 :(得分:1)

我认为您的路径不正确,因为webservice无法访问您的应用程序范围内的文件路径。上传文件详细了解Cordova File Transfer

[更新]

您可以从GitHub

下载工作项目

阅读PhonegapFileUpload Blog