Поиск по этому блогу

вторник, 3 июля 2012 г.

Отправка файлов и данных на удаленный сервер PhoneGap

Ранее я рассказывал про платформу PhoneGap и как настраивать её в Eclipse, так вот сейчас я хочу повествовать Вам о том как можно при помощи js + PhoneGap API отправить данные с телефона на удаленный сервер, как оказалось ничего в этом трудного нет и это очень хорошо описано в PhoneGap API по этому я затягивать не буду и быренько покажу вам код который делает все.


HTML / JavaScript


Значит задача стоит у нас какая, мы хотим отправить фотографию из галереи на сервер, для этого нам нужно из приложения зайти в галерею выбрать фотографию, взять адрес фотографии и отравить её по указанному адресу (Адрес мы прямо в js коде пропишем).

Открываем Cordova API (PhoneGap API старое название) и находим там FileTransfer object, вот это нам нужно для отправки на сервер данных, можно прямо оттуда скопировать код, и вставить его к себе в проект но тогда у нас сразу при загрузке программы будет вылетать галерея и выбор фотографии, а можно немного подредактировать и сделать что бы галерея открывалась по нажатию кнопки так и сделаем. Код ниже выполняет все что требуется:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>File Transfer Example</title>
    <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
    <script type="text/javascript" charset="utf-8">
 
        // Ждем пока загрузится PhoneGap
        document.addEventListener("deviceready", onDeviceReady, false);
 
        // PhoneGap готов к работе
        function onDeviceReady() {
                // Do cool things here...
        }
 
        function getImage() {
            // Открываем галерею
            navigator.camera.getPicture(uploadPhoto, function(message) {
                        alert('get picture failed');
                },{
                        quality: 50, 
                        destinationType: navigator.camera.DestinationType.FILE_URI,
                        sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
                }
            );
 
        }
        //загружаем картинки на сервер
        function uploadPhoto(imageURI) {
            var options = new FileUploadOptions();
            options.fileKey="file";
            options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
            options.mimeType="image/jpeg";
 
            var params = new Object();
            params.value1 = "test";
            params.value2 = "param";
 
            options.params = params;
            options.chunkedMode = false;
 
            var ft = new FileTransfer();
            ft.upload(imageURI, "http://yourdomain.com/upload.php", win, fail, options);
        }
        //если все хорошо
        function win® {
            console.log("Code = " + r.responseCode);
            console.log("Response = " + r.response);
            console.log("Sent = " + r.bytesSent);
            alert(r.response);
        }
        //если ошибка
        function fail(error) {
            alert("An error has occurred: Code = " = error.code);
        }
 
        </script>
</head>
<body>
    <button onclick="getImage();">Upload a Photo</button>
</body>
</html>

Ну и нам еще нужно что бы сервр что то принимал, по этому PHP код для принятия изображения. Для этого нам нужен сервер или Денвер который сможет интерпретировать php код:

<?php
print_r($_FILES);
$new_image_name = "namethisimage.jpg";
move_uploaded_file($_FILES["file"]["tmp_name"], "/srv/www/upload/".$new_image_name);
?>

Тестируем все это в эмуляторе и смотрим загрузилось изображение или нет. Спасибо за внимание.