0

これが私がやっていることです。

Twitter のユーザーが tweetbot クライアントから私の Web サイトに画像をアップロードする Web サイトを構築しています。私のアプリケーションは、tweetbot から写真を取得し、racskpace クラウド サーバーにアップロードします。私はそれをすべて成功させました。現在、次のようなユーザー インターフェイスを設計中です。Webアップローダーもあります。

http://d.pr/i/x4A0

Web アップローダーは正常に動作します。私が欲しいのは、以下の3つの画像に注意してください。ライブに変えてほしい。たとえば、ユーザーが tweetbot クライアントを介して写真をアップロードした場合、写真はここに表示されます。アップロード プロセスはすべて、ファイル /api/index.php で行われます。したがって、ユーザーがアップロードするたびにファイル /api/index.php が実行され、UI がそれをライブで反映するように、そこにコードを挿入する必要があります。

だから私はこれを行うためにAJAXを少し掘り下げました。/api/index.php に次の関数を含めました

<script type="text/javascript">
    function showPhoto(str) {

        if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else { // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                $shortenedurl = xmlhttp.responseText;
            }

        }

        xmlhttp.open("GET", "getphoto.php?q=" + str, true);
        xmlhttp.send();
    }
</script>

また、 /api/index.php ファイルの最後に showPhoto($shortenedurl) を追加して関数を実行しました

getPhoto.php は次のようになります。

<?php

    $q=$_GET["q"];

    $con = mysql_connect("","","");
    if (!$con)
    {
        die('Could not connect: ' . mysql_error());
    }

    mysql_select_db("", $con);
    $result = mysql_query("SELECT * FROM tblphoto WHERE shorturl = '$q'");
    $row = mysql_fetch_array( $result );
    $tweet = $row['tweet'];
    $sn = $row['user'];
    $thumb = $row['thumb'];

    mysql_close($con);

?>

<div class="one-third column feature">
    <h2>
        <?php echo $sn; ?>
    </h2>
    <img src=<?php echo $thumb; ?>/>
    <p>
        <?php echo $tweet; ?>
    </p>
</div>
<div class="one-third column feature">
    <h2>Two</h2>
    <img src="http://lorempixum.com/400/100/nature/2" />
    <p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="one-third column feature">
    <h2>Three</h2>
    <img src="http://lorempixum.com/400/100/nature/3" />
    <p>Lorem ipsum dolor sit amet...</p>
</div>

次に、UI の index.html に getPhoto.php を含めます。

また、データベースをループして、一度に 3 つの画像だけを表示できるようにしたいと考えています。したがって、ユーザーが写真をアップロードすると、一番左の写真が最新の写真に変更されます。前の一番左が位置 2 になり、前の中央が位置 3 になります。一番右の写真は破棄されます。

現在、スクリーンショットのように何も表示されていません。正しい方向にいますか、それとも間違っていますか?

4

1 に答える 1

1

最初の src uri が getImages.php で適切に引用されていません:

交換してみる

<img src=<?php echo $thumb; ?> />

と

<img src="<?php echo $thumb; ?>" />

ユーザーがajaxアップローダーを使用して写真をアップロードできるプロジェクトを完了したばかりで、ほとんどすべてにjQueryを使用しているため、私の答えはjQueryベースです。

写真を表示するには、画像の URL を要求する ajax リクエストを行うか、完全な画像タグを使用する必要があると思います。それはあなたの選択であり、あなたが必要とするものに依存します:

画像をリクエストするスクリプト:

$.ajax({
    type: 'POST',
    url: 'getPhotos.php',
    success: function(data){
        // Replace <div id="#photos"> contents with data returned from server:
        $('#photos').empty().append(data);
    }
});

画像を提供する PHP ファイル:

// Start session to keep track of already displayed images
session_start();
if (!isset($_SESSION['index'])) $_SESSION['index'] = 0;

// Increment photo index to show other (next) photo every time request is made:
$_SESSION['index']++;    
$index = $_SESSION['index'];
// If all photos already displayed, start over again:
if ($index > getPhotoCount()) $index = 1;

// Get photo uri from sql or somewhere:
$photourl = getPhotoURI( $index );
echo '<img src="'.$photourl.'" />';
于 2012-04-17T20:01:14.690 に答える