使用phonegap提交表单数据和文件?

时间:2013-10-24 06:39:23

标签: php mysql json file-upload cordova

我创建了简单的html表单,其中包含文本输入,文本区域,上传图像等文件。

如何将此表单数据转换为包含用户注册其数据和照片以及简历文档的手机间隙应用程序?

提交数据时应将其发送到将要保存mysql插入的php页面?

我已经尝试了序列化方法在获取php页面中的数据时面临的问题

也找不到上传文件和图片的方法??

任何帮助???

2 个答案:

答案 0 :(得分:2)

  <script>

document.addEventListener(&#34; deviceready&#34;,onDeviceReady,false);

 function onDeviceReady() {

console.log(&#34; Hello&#34;);     $(&#34;#按钮&#34)。单击(函数(EVT){     var name = $(&#34; #name&#34;)。val();     var message = $(&#34;#message&#34;)。val();     var sendData = {&#34; name&#34;:name,&#34; message&#34;:message};

$.ajax({
    type: "POST",
    url: "http://localhost/webs/main/ajax/process.php",
    data: sendData,
    success: function(data) {
        log.console(data);
         $("#info").html(data);

    }

});

 alert("Hello ");
 alert($("#test").val());
 alert($("#name").val());
 alert($("#message").val());
 return false;

});   }

答案 1 :(得分:1)

Upload image using phonegap
============================

function uploadImage(){
       //Using Camera
       navigator.camera.getPicture(uploadPhoto, onFailcapturePhoto, { quality: 50,destinationType: Camera.DestinationType.FILE_URI }); 
        //Using library            
       navigator.camera.getPicture(uploadPhoto, onFailcapturePhoto, { quality: 50,destinationType: navigator.camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY});    
}

function onFailcapturePhoto(message) {    
   console.log("Message = " + message);
}

function uploadPhoto(imageURI) {
  var imagefile = imageURI; 
  $('#vImage').attr('src', imagefile);
/* Image Upload Start */
var ft = new FileTransfer();                     
var options = new FileUploadOptions();                      
options.fileKey="vImage1";                      
options.fileName=imagefile.substr(imagefile.lastIndexOf('/')+1);
options.mimeType="image/jpeg";  
var params = new Object();
params.value1 = "test";
params.value2 = "param";                       
options.params = params;
options.chunkedMode = false;                       
ft.upload(imagefile, your_service_url, win, fail, options);   
}

function win(r) {
  console.log("Code = " + r.responseCode);
   console.log("Response = " + r.response);
   //alert($.parseJSON(r.response))    
}

function fail(error) {
   console.log("Response = " +  error.code);
} 
On your php file 
=================
 file_put_contents("file.txt", print_r($_FILES, true));
 Post Form data and Image together 
 ================================ 
// Here first submit your form input data after successfully submit upload image call

$('#submit').on('click', function(event){
if(event.handled !== true)
{
    var ajax_call = serviceURL; 
    var str = $('#form').serialize();
    $.ajax({
        type: "POST",
        url: ajax_call,
        data: str,
        dataType: "json",
        success: function(response){              
            $.each(response, function(key, value) {
                // after success submit data
                if(response){
                    var imagefile = $('#vImage').attr('src');
                    /* Image Upload Start */    
                    var ft = new FileTransfer();                     
                    var options = new FileUploadOptions();                      
                    options.fileKey="vImage1";                      
                    options.fileName=imagefile.substr(imagefile.lastIndexOf('/')+1);
                    options.mimeType="image/jpeg";  
                    options.mimeType="image/png"; 
                    var params = new Object();
                    params.value1 = "test";
                    params.value2 = "param";                       
                    options.params = params;
                    options.chunkedMode = false;                       
                    ft.upload(imagefile, your_service_url, win, fail, options);

                  }                                     
            });
        }
    });
    event.handled = true;
}
return false;
})