Question

这就是我在做什么。

我正在建立一个网站，用户可以通过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。

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

现在，没有任何内容显示，如屏幕截图所示。我是在正确的方向还是我做错了？

Answer 1

你的getImages.php中没有正确引用第一个src uri：

尝试替换

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

与

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

我刚刚完成了一个项目，用户可以使用ajax上传器上传照片，几乎所有内容都使用了jQuery，所以我的答案基于jQuery。

显示照片会发生什么，我认为您应该发出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.'" />';

使用AJAX显示图像

1 个答案:

请求图片的脚本：

提供图像的PHP文件：