0

这就是我正在做的事情。

我正在建立一个网站，来自 twitter 的用户从他们的 tweetbot 客户端将图像上传到我的网站。我的应用程序从 tweetbot 检索照片并将其上传到我的 racskpace 云服务器。我已经成功地完成了这一切。我现在正在设计一个如下所示的用户界面。还有一个网络上传器。

http://d.pr/i/x4A0

网络上传器工作正常。我想要的是，请注意下面的三张图片。我希望它改变生活。例如，如果用户通过他们的 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。

我还希望能够遍历数据库并一次只显示三个图像。因此，如果用户上传照片，最左边的照片将更改为最新的。前一个最左边占据第二个位置，前一个中间占据第三个位置。最右边的照片被丢弃。

现在，什么都没有显示，如屏幕截图所示。是在正确的方向还是我做错了？

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 回答