Javascript читает файлы в папке

Question

У меня есть следующая проблема, которую я пытаюсь решить с помощью javascript. У меня есть div с фоновым изображением, указанным в файле css, и я хочу, чтобы мой javascript периодически менял это изображение (скажем, каждые 5 секунд).

Я знаю, как это сделать, проблема в том, что у меня есть папка изображений на выбор для обратного изображения. Мне нужно иметь возможность читать имена файлов (из папки с изображениями) в массив, изменять фоновое изображение div, задерживать на 5 секунд и снова менять.

Answer 1

Вам все равно понадобится php или asp для запроса папки для файлов. Javascript не сможет «удаленно» проверять файловую систему.

Вы можете сделать что-то вроде следующего в JQuery:

$.ajax({ 
    url: 'getFolderAsArrayOfNames.php', 
    dataType: 'json', 
    success: function(data) { 
    for(var i=0;i<data.length;i++) { 
     // do what you need to do 
    } 
    }); 
}); 

И в вашем getFolderAsArrayOfNames.php, что-то вроде этого:

echo "function " 
    .$_GET['callback'] 
    ."() {return " 
    .json_encode(scandir('somepath/*.jpg')) 
    ."}"; 

Answer 2

Вы не можете прочитать содержимое папки, ни на сервере, ни на стороне клиента.

Что вы можете сделать, это прочитать содержимое папки с помощью скрипта serveride и загрузить его в массив JavaScript при обработке страницы.

Answer 3

Вы не можете использовать IO-файл с использованием JavaScript в основном из-за соображений безопасности, поэтому в любом случае вам нужно создать некоторую службу поддержки, которая обновит список доступных файлов в вашей папке. Вам не нужно это делать сложным образом, вы можете использовать AJAX для этого гладко и красиво

Answer 4

Вы должны отправить список имен вместе с JavaScript а затем перебирать его.

Answer 5

Это было бы не идеально, но при отсутствии обработки на стороне сервера (которую вы действительно должны делать - либо PHP или Rails, либо Perl или независимо от того, что поддерживает ваш хост), вы можете разрешить каталоги в своей папке с изображениями. Это имеет последствия для безопасности.

Затем загрузка, например, http://mysite.com/rotatingImages, должна отвечать списком файлов. Вы можете сделать это с помощью AJAX, проанализировать соответствующие hrefs, надавить на массив и отобразить вращающиеся изображения в JS.

Answer 6

в вашем JavaScript, использовать массив как

var images = [ "image1.jpg", "image2.jpg", "image3.jpg" ]; 

function changeImage() { 
    var image = document.getElementById("yourimage"); 
    image.src=$images[changeImage.imageNumber]; 
    changeImage.imageNumber = ++changeImage.imageNumber % images.length; 

} 
changeImage.imageNumber=0; 

setInterval(changeImage,5000); 

Значения в массиве должны быть сгенерированы РНР

Answer 7

отмеченным выше, вы не можете получить доступ к системе сервера из браузера клиента (который где работает JavaScript).

У вас есть 3 возможного решение:

1. Создайте файл JavaScript с помощью некоторых динамических фонового (PHP или Perl скриптов лучше всего подходит для этого). Основная функция JavaScript все еще может быть статичной, но инициализация используемого ею массива (либо в виде фрагмента на главной HTML-странице, либо в отдельном импортированном файле .js) будет URL-адресом, созданным php/perl. Недавнего StackOverflow обсуждения данной темы на link text

2. Сделать XMLHttpRequest (AJAX) вызов из вашего JavaScript в отдельную службу (в основном URL поддержки - снова - PHP/Perl бэкэнд сценарий) возвращение XML/JSON/your_data_format_of_choice список файлов. Это, вероятно, лучшее решение, если вы ожидаете/хотите/нуждаетесь в обновлении часто меняющегося списка изображений, тогда как предварительно созданный список файлов в решении # 1 лучше подходит, когда вам не нужен список файлов, которые меняют а веб-страница загружается в браузер.

3. Неправильное решение - если браузеры, которым вы заботитесь о поддержке анимированных фоновых изображений (gif/png), просто скомпилируйте свой набор изображений, особенно если они имеют небольшие размеры, в анимированный gif/png и используйте это как задний план.

Answer 8

• Если вы используете Apache в качестве веб-сервера и
• , если вы можете настроить это, чтобы обеспечить каталог по умолчанию листинг папки изображений (используйте соответствующие параметры в httpd.conf и/или .htaccess), и
• , если вам все равно, что список изображений доступен всем который посещает ваш веб-сайт,

тогда вам не нужно PHP или какой-либо другой стороне сервера обработки.

Вы можете использовать XMLHttpRequest (или функцию jQuery ajax, которая является красивой оберткой), чтобы получить список для этой папки. Ответ будет HTML, и это будет выглядеть примерно так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> 
<html> 
<head> 
    <title>Index of /demo1/images</title> 
</head> 
<body> 
<h1>Index of /demo1/images</h1> 
<pre><img src="/icons/blank.gif" alt="Icon "> <a href="?C=N;O=D">Name</a>     <a href="?C=M;O=A">Last modified</a>  <a href="?C=S;O=A">Size</a> <a href="?C=D;O=A">Description</a><hr><img src="/icons/back.gif" alt="[DIR]"> <a href="/demo1">Parent Directory</a>        - 
<img src="/icons/image2.gif" alt="[IMG]"> <a href="tree.gif">tree.gif</a>    17-Mar-2009 12:58 6.2K 
<img src="/icons/image2.gif" alt="[IMG]"> <a href="house.gif">house.gif</a>    17-Mar-2009 12:58 6.5K 
<img src="/icons/image2.gif" alt="[IMG]"> <a href="car.gif">car.gif</a>     02-Mar-2009 15:37 8.4K 
<img src="/icons/image2.gif" alt="[IMG]"> <a href="elephant.jpg">elephant.jpg</a>   02-Mar-2009 15:37 3.4K 
<hr></pre> 
<address>Apache/2.0.63 (Unix) Server at zeppo Port 80</address> 
</body></html> 

Поскольку этот выход является довольно предсказуемым, вы можете попробовать разбор из имен файлов, используя JavaScript regular expression, но это, вероятно, так же легко и надежнее создать скрытый DIV на вашей странице, поместите ответ HTML в этот DIV, а затем используйте методы DOM, чтобы найти <a href> s, которые после <img> тегов с атрибутом alt="[IMG]". Еще раз, используя jQuery Selectors или аналогичные вспомогательные методы, доступные в других инструментах, сделайте этот разбор DOM довольно простым.

После того, как у вас есть URL нового изображения (проанализировано с href), вы можете установить новый фон CSS для своего div с свойством .style.backgroundImage.