JavaScriptとajaxを使用して特定のフォルダ内の画像を検索しますか？

特定のフォルダ内の画像を検索するには、htmlとJavaScriptを使用して小さなアプリを作る必要があります。JavaScriptとajaxを使用して特定のフォルダ内の画像を検索しますか？

たとえば、/imagesという名前のフォルダにf1.jpg, f2.gif, f3.pngの画像とhtmlのウェブページがあり、検索入力があります。 f1を検索すると、f1.jpgの画像が<img>というタグで検索入力の下に表示されます。

どのように私はhtmlやjavascriptやajaxを使ってすべての画像を印刷することができますか？

のHTMLコード例：

<!doctype html> 
<html> 
<head> 
    <title>Search images</title> 

<script type="text/javascript"> 
var folder = "images/"; 

$.ajax({ 
    url : folder, 
    success: function (data) { 
     $(data).find("a").attr("href", function (i, val) { 
      if(val.match(/\.(jpe?g|png|gif)$/)) { 
       $("body").append("<img src='"+ folder + val +"'>"); 
      } 
     }); 
    } 
}); 
</script> 
</head> 
<body> 
<form> 
<label>Search for image:</label> 
<br /> 
<input type="text" name="search" placeholder=""> 
<button type="submit">Search</button> 
<br /> 
<!-- Image result should appear here --> 
</form> 
</body> 
</html>

出典

2016-03-29 Magic Coding

何か試しましたか？ – DBS

http://stackoverflow.com/a/32940532/383904 –

@ RokoC.Buljan stackoverflow.com/a/32940532/383904この検索とすべての画像を印刷し、私の質問は異なります！ –

あなたは、このためにajaxは必要ありません。あなたが使用して画像のURLを作成することができます。

var img = new Image(); 
img.src = path_to_image; 

img.onerror = function() { 
    // any logic in case of error 
}; 

img.onload = function() { 
    document.body.appendChild(img); 
};

以下のように画像がImageのonloadイベントを使用してロードされているかどうか、あなたはちょうどあなたがこの例で https://plnkr.co/edit/RWH73qp0jmOZeymvV6Aq?p=preview

ノートを見ることができます見ることができますpredefined_path_to_folder + search_input_valueとそれを値として使用img.src

出典

2016-03-29 23:21:23 S4beR

OPはそれがユーザーの推測ゲームをプレイしたい場合、それは動作する可能性があります：*画像の名前を入力し、それを見つけることを願って：）*キッド。ない。しかし、どのような場合でも利用可能な画像のリストを表示するのに便利です...ちょうど大声で考えて... –

ユーザーは本当に推測する必要はありません。 'onload'ページでは、上記のコードを使用してすべての利用可能なイメージを見つけるためにバックグラウンドスクリプトを実行する必要があります（ファイル名がf1.png、f2.png、f3.pngなどのパターンに従うと仮定して）リスト。 – S4beR

JavaScriptとajaxを使用して特定のフォルダ内の画像を検索しますか？

答えて

関連する問題