Php 用AJAX显示图像

这就是我正在做的

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

网络上传器工作正常。我想要的是，注意下面的三张图片。我希望它改变生活。例如，如果用户通过其tweetbot客户端上传照片，照片应显示在此处。上传过程都是通过文件/api/index.php完成的。因此，无论我需要在那里输入什么代码，以便每当用户上传时，都会执行文件/api/index.php，并且我的UI应该反映出这一点

为此，我在AJAX中做了一些探索。我在my/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>

功能展示照片（str）{
if（window.XMLHttpRequest）{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}else{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
$shortenedurl=xmlhttp.responseText；
}
}
open（“GET”、“getphoto.php？q=“+str，true”）；
xmlhttp.send（）；
}

我还通过在/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>

---

在getImages.php中未正确引用第一个src uri:

试着替换

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

/>

与

“/>

我刚刚完成了一个项目，在这个项目中，用户可以使用ajax上传器上传照片，并且几乎所有的事情都使用了jQuery，所以我的答案是基于jQuery的

至于显示照片，我认为您应该发出ajax请求，请求图像URL，或者完整的图像标记。这是您的选择，取决于您需要什么：

请求图像的脚本：

$.ajax({
键入：“POST”，
url:'getPhotos.php'，
成功：功能（数据）{
//用从服务器返回的数据替换内容：
$（'#photos'）.empty（）.append（数据）；
}
});

提供图像的PHP文件：

//启动会话以跟踪已显示的图像
会话_start（）；
如果（！isset（$_会话['index']）$_会话['index']=0；
//每次请求时，增加照片索引以显示其他（下一张）照片：
$_会话['index']++；
$index=$\会话['index']；
//如果已显示所有照片，请重新开始：
如果（$index>getPhotoCount（））$index=1；
//从sql或其他地方获取照片uri：
$photourl=getPhotoURI（$index）；
回声'；

您应该真正分离逻辑层

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

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