Jquery / Javascriptを使用して、フォルダーの1つからすべての画像をWebページにロードする方法
.jsファイルと同じディレクトリに「images」という名前のフォルダーがあります。 Jquery/Javascriptを使用して、「images」フォルダーからすべての画像をhtmlページにロードします。
画像の名前は連続した整数ではないので、これらの画像をどのように読み込むのですか？
ローカルホストとライブサーバーの両方で問題なく機能し、許可されているファイル拡張子の区切りリストを拡張できます。
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 +"'>" );
}
});
}
});
通知
ApacheサーバーはデフォルトでOption Indexesがオンになっています-例えばExpress for Node 上記のNPMパッケージを使用して動作させることができます： https://github.com/expressjs/serve-index
リストしたいファイルがserver.js内よりも/imagesにある場合は、次のようなものを追加できます。
const express = require('express');
const app = express();
const path = require('path');
// Allow assets directory listings
const serveIndex = require('serve-index');
app.use('/images', serveIndex(path.join(__dirname, '/images')));
つかいます ：
var dir = "Src/themes/base/images/";
var fileextension = ".png";
$.ajax({
//This will retrieve the contents of the folder if the folder is configured as 'browsable'
url: dir,
success: function (data) {
//List all .png file names in the page
$(data).find("a:contains(" + fileextension + ")").each(function () {
var filename = this.href.replace(window.location.Host, "").replace("http://", "");
$("body").append("<img src='" + dir + filename + "'>");
});
}
});
他の拡張機能がある場合は、それを配列にしてから、in_array()を使用して1つずつ拡張できます。
P.s：上記のソースコードはテストされていません。
このページの上部にあるRoy M Jの例では、これがファイル拡張子を追加する方法です。
var fileextension = [".png", ".jpg"];
$(data).find("a:contains(" + (fileextension[0]) + "), a:contains(" + (fileextension[1]) + ")").each(function () { // here comes the rest of the function made by Roy M J
この例では、さらに含まれています。
これを行う1つの方法を次に示します。少しPHPも実行します。
PHP部分：
$filenameArray = [];
$handle = opendir(dirname(realpath(__FILE__)).'/images/');
while($file = readdir($handle)){
if($file !== '.' && $file !== '..'){
array_Push($filenameArray, "images/$file");
}
}
echo json_encode($filenameArray);
JQueryパーツ：
$.ajax({
url: "getImages.php",
dataType: "json",
success: function (data) {
$.each(data, function(i,filename) {
$('#imageDiv').prepend('<img src="'+ filename +'"><br>');
});
}
});
したがって、基本的にはPHPファイルを実行して画像ファイル名のリストをJSONとして返し、ajax呼び出しを使用してそのJSONを取得し、htmlに追加/追加します。おそらくフォルダから取得したファイルをフィルタリングしたいでしょう。
1 のphp部分に関するヘルプがありました
私の場合のように、自分のマシンのローカルフォルダーからイメージをロードする場合は、非常に短いWindowsバッチファイルを使用して簡単にロードできます。これは、>（ファイルを上書きする）および>>（ファイルに追加する）を使用して、コマンドの出力をファイルに送信する機能を使用します。
潜在的に、ファイル名のリストを次のようなプレーンテキストファイルに出力できます。
dir /B > filenames.txt
ただし、テキストファイルを読み取るにはさらに手間がかかるため、代わりにjavascriptファイルを出力します。このファイルを読み込んで、すべてのファイル名を含むグローバル変数を作成できます。
echo var g_FOLDER_CONTENTS = mlString(function() { /*! > folder_contents.js
dir /B images >> folder_contents.js
echo */}); >> folder_contents.js
表記内にコメントがある奇妙な関数の理由は、Javascriptの複数行文字列の制限を回避するためです。 dirコマンドの出力は正しい文字列を書き込むようにフォーマットできないため、回避策 here を見つけました。
function mlString(f) {
return f.toString().
replace(/^[^\/]+\/\*!?/, '').
replace(/\*\/[^\/]+$/, '');
}
生成されたjavascriptファイルが実行される前にこれをメインコードに追加すると、g_FOLDER_CONTENTSというグローバル変数が作成されます。これは、dirコマンドからの出力を含む文字列です。これをトークン化すると、ファイル名のリストが表示され、好きなことを実行できます。
var filenames = g_FOLDER_CONTENTS.match(/\S+/g);
以下にすべてをまとめた例を示します。 image_loader.Zip
この例では、run.batはJavascriptファイルを生成し、index.htmlを開きます。したがって、index.htmlを自分で開く必要はありません。
NOTE：.batはWindowsで実行可能なタイプであるため、次のようなランダムなインターネットリンクからダウンロードする場合は、実行前にテキストエディターで開きますこれです。
LinuxまたはOSXを実行している場合は、おそらくバッチファイルに似た処理を実行し、mlStringを使用せずに正しくフォーマットされたjavascript文字列を生成できます。
$(document).ready(function(){
var dir = "test/"; // folder location
var fileextension = ".jpg"; // image format
var i = "1";
$(function imageloop(){
$("<img />").attr('src', dir + i + fileextension ).appendTo(".testing");
if (i==13){
alert('loaded');
}
else{
i++;
imageloop();
};
});
});
このスクリプトでは、フォルダー内の画像ファイルに1.jpg、2.jpg、3.jpg、...から13.jpgという名前を付けました。
必要に応じてディレクトリ名とファイル名を変更できます。
Roko C. Buljanの答えに基づいて、フォルダーとそのサブフォルダーから画像を取得するこのメソッドを作成しました。これにはいくつかのエラー処理が必要になる場合がありますが、単純なフォルダー構造では正常に機能します。
var findImages = function(){
var parentDir = "./Resource/materials/";
var fileCrowler = function(data){
var titlestr = $(data).filter('title').text();
// "Directory listing for /Resource/materials/xxx"
var thisDirectory = titlestr.slice(titlestr.indexOf('/'), titlestr.length)
//List all image file names in the page
$(data).find("a").attr("href", function (i, filename) {
if( filename.match(/\.(jpe?g|png|gif)$/) ) {
var fileNameWOExtension = filename.slice(0, filename.lastIndexOf('.'))
var img_html = "<img src='{0}' id='{1}' alt='{2}' width='75' height='75' hspace='2' vspace='2' onclick='onImageSelection(this);'>".format(thisDirectory + filename, fileNameWOExtension, fileNameWOExtension);
$("#image_pane").append(img_html);
}
else{
$.ajax({
url: thisDirectory + filename,
success: fileCrowler
});
}
});}
$.ajax({
url: parentDir,
success: fileCrowler
});
}
JQueryなしでこれを行うことに興味がある場合-現在最も支持されている答えの純粋なJSバリアント（ from here ）があります：
var xhr = new XMLHttpRequest();
xhr.open("GET", "/img", true);
xhr.responseType = 'document';
xhr.onload = () => {
if (xhr.status === 200) {
var elements = xhr.response.getElementsByTagName("a");
for (x of elements) {
if ( x.href.match(/\.(jpe?g|png|gif)$/) ) {
let img = document.createElement("img");
img.src = x.href;
document.body.appendChild(img);
}
};
}
else {
alert('Request failed. Returned status of ' + xhr.status);
}
}
xhr.send()
fs.readdir または fs.readdirSync メソッドを使用して、ディレクトリ内のファイル名を取得できます。
2つのメソッドの違いは、最初のメソッドが非同期であるため、読み取りプロセスが終了したときに実行されるコールバック関数を提供する必要があることです。
2番目は同期で、ファイル名の配列を返しますが、読み取りプロセスが終了するまでコードの実行を停止します。
その後、単に名前を反復処理し、追加機能を使用して、適切な場所に追加するだけです。仕組みを確認するには、 HTML DOMおよびJSリファレンス を参照してください
Chromeを使用して、リンクで画像ファイルを検索することは（以前に提案されたように）機能しませんでした。
(...) i18nTemplate.process(document, loadTimeData);
</script>
<script>start("current directory...")</script>
<script>addRow("..","..",1,"170 B","10/2/15, 8:32:45 PM");</script>
<script>addRow("fotos-interessantes-11.jpg","fotos-interessantes-> 11.jpg",false,"","");</script>
たぶん、最も信頼できる方法は次のようなことです：
var folder = "img/";
$.ajax({
url : folder,
success: function (data) {
var patt1 = /"([^"]*\.(jpe?g|png|gif))"/gi; // extract "*.jpeg" or "*.jpg" or "*.png" or "*.gif"
var result = data.match(patt1);
result = result.map(function(el) { return el.replace(/"/g, ""); }); // remove double quotes (") surrounding filename+extension // TODO: do this at regex!
var uniqueNames = []; // this array will help to remove duplicate images
$.each(result, function(i, el){
var el_url_encoded = encodeURIComponent(el); // avoid images with same name but converted to URL encoded
console.log("under analysis: " + el);
if($.inArray(el, uniqueNames) === -1 && $.inArray(el_url_encoded, uniqueNames) === -1){
console.log("adding " + el_url_encoded);
uniqueNames.Push(el_url_encoded);
$("#slider").append( "<img src='" + el_url_encoded +"' alt=''>" ); // finaly add to HTML
} else{ console.log(el_url_encoded + " already in!"); }
});
},
error: function(xhr, textStatus, err) {
alert('Error: here we go...');
alert(textStatus);
alert(err);
alert("readyState: "+xhr.readyState+"\n xhrStatus: "+xhr.status);
alert("responseText: "+xhr.responseText);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>これを自動的に行うことはできません。 JSは、それと同じディレクトリ内のファイルを見ることができません。
最も簡単なのは、おそらくこれらの画像名のリストをJavaScriptに渡すことです。
それ以外の場合は、JSを使用してWebサーバーからディレクトリリストを取得し、解析して画像のリストを取得できる場合があります。
JQueryでは、Ajaxを使用してサーバー側スクリプトを呼び出すことができます。サーバー側スクリプトは、フォルダー内のすべてのファイルを検索し、返された情報を処理する必要があるHTMLファイルにそれらを返します。
Listar una serie de imágenes contenidas en una carpeta y mostrarlas en el body
これは私のために働くコードです、私が欲しいのは、あなたの画像を見つけることができるディレクトリを置くだけで良いように私のページに画像を直接リストすることです-> dir = "images /"私は部分文字列を行いますvar pathName = filename.substring（filename.lastIndexOf（ '/'）+ 1）;リストされたファイルの名前を必ず持ってきて、最後にURLをリンクしてbody $（ "body"）で公開します。追加（$（ ""））;
Para correrlo necesitan la librería de jquery
Espero les sea útil Saludos desde México.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-1.6.3.min.js"></script>
<script>
var dir = "imagenes/";
var fileextension = ".jpg";
$.ajax({
//This will retrieve the contents of the folder if the folder is configured as 'browsable'
url: dir,
success: function (data) {
//Lsit all png file names in the page
$(data).find("a:contains(" + fileextension + ")").each(function () {
var filename = this.href.replace(window.location.pathname, "").replace("http://", "");
var pathName = filename.substring(filename.lastIndexOf('/') + 1);
$("body").append($("<img src=" + dir + pathName + "></img>"));
console.log(dir+pathName);
});
}
});
</script>
</head>
<body>
<img src="1_1.jpg">
</body>
</html>
次のスクリプトを追加します。
<script type="text/javascript">
function mlString(f) {
return f.toString().
replace(/^[^\/]+\/\*!?/, '');
replace(/\*\/[^\/]+$/, '');
}
function run_onload() {
console.log("Sample text for console");
var filenames = g_FOLDER_CONTENTS.match(/\S+/g);
var fragment = document.createDocumentFragment();
for (var i = 0; i < filenames.length; ++i) {
var extension = filenames[i].substring(filenames[i].length-3);
if (extension == "png" || extension == "jpg") {
var iDiv = document.createElement('div');
iDiv.id = 'images';
iDiv.className = 'item';
document.getElementById("image_div").appendChild(iDiv);
iDiv.appendChild(fragment);
var image = document.createElement("img");
image.className = "fancybox";
image.src = "images/" + filenames[i];
fragment.appendChild(image);
}
}
document.getElementById("images").appendChild(fragment);
}
</script>
次に、次を使用してjsファイルを作成します。
var g_FOLDER_CONTENTS = mlString(function() { /*!
1.png
2.png
3.png
*/});