0

この質問はこのフォーラム ( Unable to get values in POST php web service ) で回答されたことを認識していますが、質問と回答の両方で jQuery が使用されており、私の場合は使用できません (理由に関係なく)。 ...

したがって、キャンバスの「スクリーン キャプチャ」(「toDataURL()」関数を使用) を作成し、AJAX を使用して PHP ファイルに送信するための Javascript ファイルがあります。送信するデータが非常に長いため、「GET」メソッドを使用できないため (AJAX は 414 エラーを返します: 「URL TOO LONG」)、「POST」を使用する必要があります。

私はプレーンな Javascriptでいくつかの例に従いました (誰もが jQuery を使用しているため、見つけるのは決して簡単ではありません! :P)。私のコードは次のようになります。

var dataURL = me.video.getScreenCanvas().toDataURL();

var req = false;
try{
req = new XMLHttpRequest();
} catch (e){
// IE
try{
    req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
    // try an older version
    try{
    req = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e){
    return false;
    }
}
}

req.onreadystatechange = function(){
    if(req .readyState == 4){
    if(req.status == 200)
    { 
        console.log("RESULT AJAX: "+req.responseText);
    }else{ 
        console.log("ERROR AJAX: returned status code "+req.status+" "+req.statusText); 
    }
    }
}

req.open("POST", "http://www.mywebpage.com/image_upload.php", true);
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
req.send("imgdata="+dataURL);

「dataURL」変数の内容をログに記録しようとすると、「image/png...blablabla」のような大きな文字列がログに記録されるので、期待どおりにデータが生成されていると思います。

この時点で、PHP ファイルは結果を取得しようとします。

<?php

$imageData = '';

if(isset($_POST['imgdata']))
{
    echo "correct POST!";
    $imageData = $_POST['imgdata'];
}else if(isset($_GET['imgdata'])){
    echo "correct GET!";
    $imageData = $_GET['imgdata'];
}

echo "ImgData: ".$imageData;

if($imageData != '')
{
    $imageData = str_replace(' ','+',$imageData);
    $decodedData = base64_decode($imageData);

    if(file_put_contents('imatge1.jpeg', $decodedData) !== FALSE)
    {
        echo "Image has been successfully processed...?";
    }else{
        echo "Error trying to process the image...";
    }
}

?>

ただし、PHPファイルは「POST」メッセージも「GET」メッセージもエコーしません。「ImgData」エコーは空を返し、「成功」も「画像処理中のエラー」メッセージもエコーしません...したがって、 PHP ファイルは、AJAX の「POST」メソッドによって渡されたデータを取得できません。

私は何を間違っていますか？プレーンな Javascriptを使用してこの問題を解決するにはどうすればよいですか( jQuery を使用しないことが重要です)。

あなたの時間と労力を前もって感謝します! :)

4

2 に答える 2

1

私はあなたのJavaScriptを変更し、これをテストしました。あなたとうまくいくかどうか試してください:

function create_XHR(){
    var XHR = null;
    if (window.XMLHttpRequest){
        XHR = new XMLHttpRequest();
    }
    else if(window.ActiveXObject){
        try {
            XHR = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            XHR = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    else {
        alert("Your navigator is old to run objets XMLHTTPRequest...");
        XHR = false;
    }
    return XHR;
}


function ajax_post(page, data) {

    var XHR = create_XHR();
    XHR.open("POST", page, true);
    XHR.onreadystatechange = function() {
        if (XHR.readyState === 4 && (XHR.status === 200 || XHR.status === 0)) {
            console.log("Success Transaction");
        }
    };
    XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    XHR.send(data);
}


//Running the code :
//==================
var dataURL = me.video.getScreenCanvas().toDataURL();
ajax_post("http://www.mywebpage.com/image_upload.php", {"imgdata":dataURL});

cors http を変更します。サーバー PHP で、これをページの最初の「image_upload.php」に追加します。

//Part added by ilyas :
    if (isset($_SERVER['HTTP_ORIGIN'])) {
        header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Max-Age: 86400');    // cache for 1 day
    }
//End of part.
于 2014-05-15T14:50:33.793 に答える