it-swarm.com.ru

Как загрузить все изображения из одной моей папки на мою веб-страницу, используя Jquery/Javascript

У меня есть папка с именем "images" в той же директории, что и мой файл .js. Я хочу загрузить все изображения из папки «images» в мою HTML-страницу, используя Jquery/Javascript.

Поскольку имена изображений не являются последовательными целыми числами, как я должен загружать эти изображения?

41
rishy

Работает как на локальном, так и на живом сервере без проблем и позволяет расширить список разрешенных расширений: 

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 +"'>" );
            } 
        });
    }
});

В основном улучшение OA Роя

53
Roko C. Buljan

Используйте: 

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().

P.s: Приведенный выше исходный код не проверен.

50
Roy M J

Это способ добавить больше расширений файлов, в примере, приведенном Рой М 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   

В этом примере я добавил больше содержит. 

9
Bart Hoekstra

Вот один из способов сделать это. Вовлекает делать немного 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, захватить этот JSON с помощью вызова ajax и добавить/добавить их в html. Возможно, вы захотите отфильтровать файлы, которые вы захватили из папки.

Была некоторая помощь по части PHP от 1

5
Pnar Sbi Wer

Если, как и в моем случае, вы хотите загрузить изображения из локальной папки на свой компьютер, существует простой способ сделать это с помощью очень короткого пакетного файла 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 не могут быть отформатированы для записи правильной строки, поэтому я нашел обходной путь здесь .

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, вы, вероятно, можете сделать что-то похожее на командный файл и создать корректно отформатированную строку javascript без использования ошибки mlString.

2
MrFlamey
$(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, ... to 13.jpg.

Вы можете изменить каталог и имена файлов по своему усмотрению.

1
Siva Shanmugam

Вы можете использовать методы fs.readdir или fs.readdirSync для получения имен файлов в каталоге.

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

Второй является синхронным, он возвращает массив имен файлов, но останавливает любое дальнейшее выполнение вашего кода, пока не завершится процесс чтения.

После этого вам просто нужно перебрать имена и, используя функцию добавления, добавить их в соответствующие места. Чтобы проверить, как это работает, смотрите HTML DOM и JS reference

0
Aman Chhabra

Основываясь на ответе Роко С. Буляна, я создал этот метод, который получает изображения из папки и ее подпапок . Это может потребовать некоторой обработки ошибок, но отлично работает для простой структуры папок.

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
    });
}
0
ashish

Используя 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>

0
Pedro Reis

Вы не можете сделать это автоматически. Ваш JS не может видеть файлы в том же каталоге, что и он.

Проще всего, вероятно, дать список этих имен изображений для вашего JavaScript.

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

0
sync

В jQuery вы можете использовать Ajax для вызова серверного скрипта. Сценарий на стороне сервера найдет все файлы в папке и вернет их в ваш HTML-файл, где вам нужно будет обработать возвращенную информацию.

0
jeff
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, чтобы опубликовать его в теле $ ("тело"). append ($ (""));

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>
0
Sancho Sancho

Добавьте следующий скрипт:

<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 
*/}); 
0
Suraj Lulla