Вопросы Теги

Найти список изображений в папке через jQuery [duplicate]

Используйте pwd для поиска из любого каталога, в котором вы находитесь, рекурсия вниз 

grep -rnw `pwd` -e "pattern"

Обновление. В зависимости от используемой вами версии grep вы можете опустить pwd. В более новых версиях ., по-видимому, является аргументом по умолчанию для grep, если каталог не указан таким образом:

grep -rnw -e "pattern"

или

grep -rnw "pattern"

будет делать то же, что и выше!

27
задан cor 17 September 2014 в 09:35
поделиться

6 ответов

Многие трюки работают, но запрос Ajax разделяет имя файла на 19 символов? Посмотрите на выход запроса ajax, чтобы увидеть это:

Имя файла в порядке, чтобы перейти в атрибут href, но $(this).attr("href") использует текст имени <a href='full/file/name' > Split file </a>

Таким образом, $(data).find("a:contains(.jpg)") не может обнаружить расширение.

Надеюсь, это полезно

0
ответ дан Community 22 August 2018 в 21:08
поделиться

Нет, вы не можете сделать это, используя только Javascript. Клиентский Javascript не может прочитать содержимое каталога так, как я думаю, вы спрашиваете.

Однако, если вы можете добавить индексную страницу (или настроить веб-сервер, чтобы показать index page) каталога изображений, и вы обслуживаете Javascript с того же сервера, тогда вы можете сделать вызов AJAX для извлечения индекса и затем проанализировать его.

ie

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"));
     });
  }
});
31
ответ дан Euan 22 August 2018 в 21:08
поделиться

Нет. JavaScript - это клиентская технология и не может ничего делать на сервере. Однако вы можете использовать AJAX для вызова сценария на стороне сервера (например, PHP), который может вернуть необходимую вам информацию.

Если вы хотите использовать AJAX, самым простым способом будет использование jQuery: 

$.post("someScript.php", function(data) {
   console.log(data); //"data" contains whatever someScript.php returned
});
8
ответ дан James Allardice 22 August 2018 в 21:08
поделиться
  • 1
    как я могу использовать AJAX. Не могли бы вы мне помочь? – Pooja 9 August 2011 в 10:50

Это отобразит все 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')

     });
  }
});
23
ответ дан L84 22 August 2018 в 21:08
поделиться
  • 1
    Я получаю ошибку 403 здесь, любые обходные пути? – Erik Grosskurth 26 July 2013 в 16:47
  • 2
    Сделайте свой каталог доступным для просмотра: Options +Indexes – David Artmann 3 July 2015 в 21:08
  • 3
    некоторая часть имени файла со специальным символом не будет выбрана. например, filename = "blk100A # 01-01 & quot; & lt; - не будет выбрано, но имя_файла = & quot; blk100 # 01-01 & quot; & lt; - будет выбран (без «A» до «#») может ли кто-нибудь помочь? – heng heng 1 August 2015 в 17:55

ИМХО, идея Эдискана Адиля Ата на самом деле является самым правильным способом. Он извлекает URL-адреса якорных тегов и помещает их в другой тег. И если вы не хотите, чтобы якоря видели посетитель страницы, а затем только .hide() все они с JQuery или display: none; в CSS.

Также вы можете выполнить предварительную выборку, например: 

<link rel="prefetch" href="imagefolder/clouds.jpg" />

Таким образом, вам не нужно скрывать ее и по-прежнему можно извлечь путь к изображению.

0
ответ дан Thielicious 22 August 2018 в 21:08
поделиться

Хотя вы можете запускать команды FTP с помощью WebSockets, более простое решение заключается в перечислении ваших файлов с помощью opendir на стороне сервера (PHP) и «выплескивании» его в исходный код HTML, поэтому он будет доступен для клиентская сторона.

Следующий код будет делать именно это,

Необязательно -

  • использовать тег <a> для представления ссылки.
  • для получения дополнительной информации на стороне сервера (PHP), например размер файла,

PHP filesize TIP : & nbsp; вы также можете легко преодолеть ограничение на 2 ГБ файлового архива PHP, используя: AJAX + HEAD запрос + .htaccess правило, чтобы разрешить доступ Content-Length с клиентской стороны. 

<?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>
3
ответ дан user 22 August 2018 в 21:08
поделиться
Другие вопросы по тегам:

Похожие вопросы: