Я хочу отобразить все изображения из папки, расположенной на сервере в галерее изображений.
Есть ли способ вернуть список всех имен файлов изображений из папки, используя только JavaScript или JQuery?
Также я хочу подсчитать количество файлов изображений в подобной папке, используя только JavaScript.
Есть ли способ подсчитать количество файлов изображений из папки, используя только JavaScript?
Нет, вы не можете сделать это, используя только Javascript. Клиентский Javascript не может прочитать содержимое каталога так, как я думаю, вы спрашиваете.
Однако, если вы можете добавить индексную страницу (или настроить веб-сервер для отображения индексной страницы для) каталога изображений, и вы обслуживаете Javascript с того же сервера, то вы можете сделать вызов AJAX чтобы получить индекс, а затем проанализировать его.
то есть.
1) Включите индексы в Apache для соответствующего каталога на вашем сайте:
http://www.cyberciti.biz/faq/enabling-apache-file-directory-indexing/
2) Затем выберите/проанализируйте его с помощью jQuery. Вам нужно будет решить, как лучше очистить страницу, и почти наверняка более эффективный способ получить весь список, но пример:
$.ajax({
url: "http://yoursite.com/images/",
success: function(data){
$(data).find("td > a").each(function(){
// will loop through
alert("Found a file: " + $(this).attr("href"));
});
}
});
Это отобразит все jpg файлы в папке, которую вы определяете под URL-адресом: и добавьте их в div в качестве абзаца. Это можно сделать и с помощью ul li.
$.ajax({
url: "YOUR FOLDER",
success: function(data){
$(data).find("a:contains(.jpg)").each(function(){
// will loop through
var images = $(this).attr("href");
$('<p></p>').html(images).appendTo('a div of your choice')
});
}
});
Нет. JavaScript - это клиентская технология и не может ничего делать на сервере. Однако вы можете использовать AJAX для вызова серверной версии script (например, PHP), которая может вернуть необходимую вам информацию.
Если вы хотите использовать AJAX, самым простым способом будет использование jQuery:
$.post("someScript.php", function(data) {
console.log(data); //"data" contains whatever someScript.php returned
});
Хотя вы можете запускать команды FTP с помощью WebSockets,
более простым решением является перечисление ваших файлов с помощью opendir на стороне сервера (PHP) и "выплевывание" его в исходный код HTML, поэтому он будет доступен для клиентской стороны.
Следующий код будет делать именно это,
Необязательно -
<a>, чтобы указать ссылку.запрос для получения дополнительной информации с использованием серверной части (PHP),
например, размер файла,
PHP filesize TIP: вы также можете легко преодолеть предел 2 ГБ файла PHP, используя: AJAX + HEAD запрос +.htaccess правило, чтобы позволить Content-Length доступ с клиентской стороны.
Полностью рабочий пример можно найти в моем репозитории github: download.eladkarako.com
Ниже приведен пример сокращения (упрощенного):
<?php
/* taken from: https://github.com/eladkarako/download.eladkarako.com */
$path = 'resources';
$files = [];
$handle = @opendir('./' . $path . '/');
while ($file = @readdir($handle))
("." !== $file && ".." !== $file) && array_push($files, $file);
@closedir($handle);
sort($files); //uksort($files, "strnatcasecmp");
$files = json_encode($files);
unset($handle,$ext,$file,$path);
?>
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-container></div>
<script>
/* you will see (for example): 'var files = ["1.bat","1.exe","1.txt"];' if your folder containes those 1.bat 1.exe 1.txt files, it will be sorted too! :) */
var files = <?php echo $files; ?>;
files = files.map(function(file){
return '<a data-ext="##EXT##" download="##FILE##" href="http://download.eladkarako.com/resources/##FILE##">##FILE##</a>'
.replace(/##FILE##/g, file)
.replace(/##EXT##/g, file.split('.').slice(-1) )
;
}).join("\n<br/>\n");
document.querySelector('[data-container]').innerHTML = files;
</script>
</body>
</html>
Результат DOM будет выглядеть следующим образом:
<html lang="en-US" dir="ltr"><head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-container="">
<a data-ext="bat" download="1.bat" href="http://download.eladkarako.com/resources/1.bat">1.bat</a>
<br/>
<a data-ext="exe" download="1.exe" href="http://download.eladkarako.com/resources/1.exe">1.exe</a>
<br/>
<a data-ext="txt" download="1.txt" href="http://download.eladkarako.com/resources/1.txt">1.txt</a>
<br/>
</div>
<script>
var files = ["1.bat","1.exe","1.txt"];
files = files.map(function(file){
return '<a data-ext="##EXT##" download="##FILE##" href="http://download.eladkarako.com/resources/##FILE##">##FILE##</a>'
.replace(/##FILE##/g, file)
.replace(/##EXT##/g, file.split('.').slice(-1) )
;
}).join("\n<br/>\n");
document.querySelector('[data-container').innerHTML = files;
</script>
</body></html>
Многие трюки работают, но запрос Ajax разделяет имя файла на 19 символов? Посмотрите на выход запроса ajax, чтобы увидеть, что:
Имя файла в порядке, чтобы перейти в атрибут href, но использовать $(this).attr("href")
текст <a href='full/file/name' > Разделить имя файла </a>
Таким образом, $(data).find("a:contains(.jpg)") не может обнаружить расширение.
Надеюсь, это полезно
ИМХО, идея Эдискана Адиля Ата на самом деле является самым правильным способом. Он извлекает URL-адреса якорных тегов и помещает их в другой тег. И если вы не хотите, чтобы якоря видели посетитель страницы, а затем просто .hide() все они с помощью JQuery или display: none; в CSS.
Также вы можете выполнить предварительную выборку, например:
<link rel="prefetch" href="imagefolder/clouds.jpg" />
Таким образом, вам не нужно скрывать его и все еще можно извлечь путь к изображению.