1

我的目标是让用户将照片上传到名为“userupload”的根目录中。所有这个文件夹将包含 .jpg 图像。

我现在想将所有图像路径从“userupload”目录调用到不同的 .php 页面到一个名为“content”的 div 中，如下所示：<p><img class=resizeme src="userupload/uploadimage1.jpg"></p>

我找到了这个脚本，我只能返回图像文件名。这很好，但我不知道如何编辑代码以将其放置在正确的路径中。

“这将列出您在 url: 下定义的文件夹中的所有 jpg 文件：并将它们作为段落附加到 div。也可以使用 ul li 来完成。”

$.ajax({
  url: "useupload",
  success: function(data){
     $(data).find("a:contains(.jpg)").each(function(){
        // will loop through 
        var images = $(this).attr("href");

        $('<p></p>').html(images).appendTo('#content')

     });
  }
});
4

2 回答 2

1

这是您可以使用的 PHP：

image_listing.php：

<?php

$imageLinks = array();
$dh = opendir("userupload");

while ( $file = readdir($dh) )
{
    $tempArray = explode(".",$file);
    if ( isset( $tempArray[1] ) && $tempArray[1] == "jpg" )
    {
        array_push( $imageLinks, 'http://example.com/userupload/' . $file );
    }
}
closedir($dh);

echo json_encode( $imageLinks );

这将返回一个链接数组，然后您可以在 JavaScript 中使用它们：

$.get('image_listing.php', function (array) {
    $.each(array, function(){
         $('#content').append('<p><img class="resizeme" src="' + this + '"></p>');
    });
});

这是一个可行的快速示例，但您可能应该构建一个 HTML 片段（而不是在循环中每次都访问 DOM）：

$.get('image_listing.php', function (array) {
    var container = $('<div'>);
    $.each(array, function(){
         container.append('<p><img class="resizeme" src="' + this + '"></p>');
    });
    $('#content').append( container.html() );
});
于 2012-10-31T03:17:04.573 回答
0

您发布的代码似乎依赖于配置为返回userupload文件夹的目录索引列表的网络服务器（因此可能无法在不同的网络服务器上工作 - 在服务器端执行此操作的正确方法是 Joseph Silber 建议的）。该列表包含指向相对 url 的链接。

考虑到您已经在工作，并且您的所有图像都在 下userupload，循环内的简单更改.each应该可以解决问题：

var images = 'userupload/' + this.href;
$('<p><img class="resizeme" src="' + images + '"></p>').appendTo('#content');

考虑到您收到的评论 src="userupload/mysite.com/uploadimage1.jpg"：

var images = 'userupload/' + this.href.split('/')[1];
$('<p><img class="resizeme" src="' + images + '"></p>').appendTo('#content');
于 2012-10-31T03:24:04.093 回答