使用 phonegap 提交数据和图像的表单
Posted
技术标签:
【中文标题】使用 phonegap 提交数据和图像的表单【英文标题】：form with data and image submission using phonegap 【发布时间】：2013-11-07 05:39:00 【问题描述】：我正在使用 phonegap、html、ajax、jquery、mysql 和 php。
在我的 Phonagep 应用程序中，我的表单包含用户名、密码、用户照片。
我想从 html 页面提交此表单。让我们说 register.html
表单数据应该发送到我的服务器上一个名为 services 的文件夹中上传的 php 页面，假设路径是“http://www.example.com/services/register.php”。
此页面应处理 mysql 插入过程到同样上传到同一服务器上的数据库。
在这台服务器上，我还有一个名为 images 的文件夹，用户图像应该上传到该文件夹，并且它的完整浴应该插入到 mysql 数据库中。
我尝试使用 ajax 将用户名和密码发布到此页面并成功插入数据。但是我在使用 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>
【问题讨论】：
【参考方案1】：您应该使用带有 Json 的 PHP Webservice 来执行以下任务
访问 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 Webservice(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).')';
【讨论】：
感谢编辑 :) 图片路径是什么？我应该使用phonegap文件传输吗？ 图片路径是您不知道图片网址时要上传的文件网址。你可以使用phonegap文件传输而不是curl来下载。 我的图像应该从用户设备中选择上传到服务器上的文件夹example.com/Images 我在 html 中使用了输入文件 你能给我工作的例子或演示吗？ 你应该使用 then phonegap 文件传输【参考方案2】：我认为您的路径不正确，因为 web 服务无法访问您的应用程序范围内的文件的路径。上传您的文件阅读更多关于Cordova File Transfer
[更新]
您可以从GitHub下载工作项目
阅读PhonegapFileUpload Blog
【讨论】：
在发送到 php 端之前，我使用 alert 来检查路径和图像名称：C:\fakepath\image.jpg 这是错误的路径吗？ 是的，因为路径C:\fakepath\image.jpg 与您的设备相关，并且 Web 服务无法访问它。您应该使用www.some_domain.com/fakepath/image.jpg 之类的文件路径，我认为它会按您的预期工作。
好的，我怎么能在图片上传过程中做到这一点？图片将从我的设备上传到我的服务器中的文件夹
如果您不需要将图像存储在服务器上，而不是将图像的路径保存在数据库中。每次您通过网络服务选择路径并从设备而不是服务器访问图像时。以上是关于使用 phonegap 提交数据和图像的表单的主要内容，如果未能解决你的问题，请参考以下文章