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

投稿したコードは、フォルダーのディレクトリ インデックス リストを返すように構成されている Web サーバーに依存しているようですuserupload(したがって、別の Web サーバーでは機能しない可能性があります。サーバー側でそれを行う適切な方法は、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 に答える