Upload image from app made with Monaca and PhoneGap

Question

I have this code that I use for sending form data to a web server. Works fine.

$('form').submit(function(){
            //var landmarkID = $(this).parent().attr('data-landmark-id');
            var postData = $(this).serialize();

            // +'&lid='+landmarkID
            $.ajax({
                type: 'POST',
                data: postData,
                url: 'http://cykel.donslund.net/save_bicycle.php',
                success: function(data){
                    console.log(data);
                    alert('Your comment was successfully added');
                },
                error: function(){
                    console.log(data);
                    alert('There was an error adding your comment');
                }
            });
            return false;
        });

In my app I also take a picture. How do I send that picture to the server along with the form data?

Answer 1

I have make the same yesterday. I have a function for the foto selection. I give you the angular code and the php file.

 $scope.selectPicture = function() { // select picture action var cameraOptions = { quality: 50, sourceType: Camera.PictureSourceType.PHOTOLIBRARY, destinationType: Camera.DestinationType.FILE_URI, targetWidth: 400, targetHeight: 400, allowEdit: true }; var success = function(data) { $scope.$apply(function() { $scope.picData = data; var fileURL = data; var options = new FileUploadOptions(); options.fileKey = "file"; options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1); options.mimeType = "image/jpeg"; options.chunkedMode = true; var params = {}; params.id = numeroData.get(); options.params = params; var ft = new FileTransfer(); ft.upload(fileURL, encodeURI("http://www.example.net/upload.php?key=" + idData.get()), viewUploadedPictures, function(error) { alert('erreur'); }); function viewUploadedPictures() { } }); }; var failure = function(message) { alert('Failed because: ' + message); }; navigator.camera.getPicture(success, failure, cameraOptions); }; 

<?php
header('Access-Control-Allow-Origin: *'); 
if(isset($_GET['key'])){
    move_uploaded_file($_FILES["file"]["tmp_name"], "img/".$_GET['key'].".jpg");
}
?>