这就是我正在做的事情。
我正在建立一个网站，来自Twitter的用户从他们的tweetbot客户端将图像上传到我的网站。我的应用程序从tweetbot检索照片并将其上传到我的racskpace云服务器。我已经成功地做到了这一切。我现在正在设计一个用户界面，如下所示。还有一个网络上传器。
http://d.pr/i/x4A0
网络上传器工作正常。我想要的是，注意下面的三张图片。我希望它改变现场。例如，如果用户通过他们的推文机器人客户端上传照片，照片应该出现在这里。上传过程全部通过文件/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>
然后，我将getPhoto.php包含在UI的索引中.html。
我还希望能够遍历数据库并一次只显示三个图像。因此，如果用户上传照片，最左侧的照片将更改为最新照片。前一个左边最占据位置二，前一个中间占据位置三。最右边的照片被丢弃。
现在，没有任何内容显示，如屏幕截图所示。方向正确还是我做错了？
第一个 src uri 在 getImages 中没有正确引用.php：
尝试替换
<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.'" />';