Javascript читать файлы в папке - PullRequest
Новая
       18

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

2 голосов
/ 22 июня 2009

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

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

Ответы [ 8 ]

4 голосов
/ 22 июня 2009

в вашем 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);

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

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

затем вам не нужен PHP или любая другая обработка на стороне сервера.

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

<code><!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>
Сервер Apache / 2.0.63 (Unix) с портом Zeppo 80

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

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

3 голосов
/ 22 июня 2009

Вам все еще понадобится 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'))
     ."}";
1 голос
/ 22 июня 2009

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

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

1 голос
/ 22 июня 2009

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

1 голос
/ 22 июня 2009

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

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

0 голосов
/ 22 июня 2009

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

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

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

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

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

0 голосов
/ 22 июня 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...