web-dev-qa-db-ja.com

PhoneGapsファイル転送APIからPOSTデータを取得する方法

Phone Gaps（Cordova 2.1）ファイル転送APIを使用して、ユーザーの写真ライブラリからサーバーに画像を投稿しています。ファイル転送APIは正常に機能しているようです。サーバーでこの情報を取得することに戸惑っています。

理想的には、私がする必要があるのは、画像を取得してからサーバーにアップロードすることです。しかし、ファイル転送から情報を取得できないようです。

私のJavaScriptコード（画像データの投稿）は次のとおりです。

function onDeviceReady() {

            // Retrieve image file location from specified source
            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 = {};
            params.value1 = "test";
            params.value2 = "param";

            options.params = params;

            var ft = new FileTransfer();
            ft.upload(imageURI, encodeURI("http://some.server.com/upload.php"), win, fail, options);
        }

        function win(r) {
            console.log("Code = " + r.responseCode);
            console.log("Response = " + r.response);
            console.log("Sent = " + r.bytesSent);
        }

        function fail(error) {
            alert("An error has occurred: Code = " + error.code);
            console.log("upload error source " + error.source);
            console.log("upload error target " + error.target);
        }

私のサーバーサイドコードは次のとおりです。

 $paramValue = $_POST['fileKey']; //Undefined variable
 $paramValue2 = $_POST['options']; //Undefined variable
$paramValue3 = $paramValue2['fileKey'] //Undefined variable

私も試しました：

//POST variable
$paramValue = $_POST['params'];
echo "Param Value1: " . $paramValue['value1']; //Should return "test"

私も試しました：

//POST variable
$paramValue = $_POST['options'];
echo "Param Value1: " . $paramValue['options']['params']['value1']; //Should return "test"

私が得ているのは未定義の変数エラーだけですか？

どんな助けでも大歓迎です、ありがとう！

phpcordovafile-uploadslim
12
Danny

http://some.server.com に/var/www/ディレクトリを作成できます。このディレクトリにはupload.phpが必要であり、このディレクトリのコードで画像をフォルダに移動する必要があります。

/var/www/TEST/

<?php
   print_r($_FILES);
   $new_image_name = "YEAH.jpg";
   move_uploaded_file($_FILES["file"]["tmp_name"], "/var/www/TEST/".$new_image_name);
?>

それはあなたが必要とする唯一の余分なものです。

前提条件：

XAMPP LAMP WAMPまたはMAMPon your http://some.server.com

わかりやすくするために、これは私のupload.phpファイルがどのように収まるかを示すためのJavaScriptとHTMLです。

<script type="text/javascript" charset="utf-8">

// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready
function onDeviceReady() {
    console.log("device ready");
    // Do cool things here...
}

function getImage() {
    // Retrieve image file location from specified source
    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://some.server.com/TEST/upload.php", win, fail, options);
}

function win(r) {
    console.log("Code = " + r.responseCode.toString()+"\n");
    console.log("Response = " + r.response.toString()+"\n");
    console.log("Sent = " + r.bytesSent.toString()+"\n");
    alert("Code Slayer!!!");
}

function fail(error) {
    alert("An error has occurred: Code = " + error.code);
}

</script>

</head>

これが私の体にあるものです

<button onclick="getImage();">Upload a Photo</button>
20
iOSAndroidWindowsMobileAppsDev

見落とされがちなもう1つのこと：クライアントjsファイルのこのセクション：

options.fileKey="file";

サーバー側でこの部分と一致する必要があります。

$_FILES["file"]

そうしないと、この事実を示さないエラーが発生します。これは一部の人にとっては明白に聞こえるかもしれませんが、他の人は髪を引っ張るのに1〜2時間節約できます。

12
Will

パラメータ値にアクセスするには、POSTとして直接アクセスします。たとえば、

サーバ側 ： echo "Param Value1: " . $_POST['value1']; //will return "test" as output.

10
Yogesh Malpani