У меня есть папка с именем "images" в том же каталоге, что и мой .js файл. Я хочу загрузить все изображения из папки "images" в мою страницу html с помощью JQuery/Javascript.
Так как имена изображений не являются целыми целыми числами, как я должен загружать эти изображения?
Работает как на локальном, так и на живом сервере без проблем и позволяет расширить список разрешенных файловых расширений:
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 +"'>" );
}
});
}
});
УВЕДОМЛЕНИЕ
На сервере Apache по умолчанию включены Option Indexes - если вы используете другой сервер, например, Express для узла, вы можете использовать этот пакет NPM для работы вышеупомянутого: https://github.com/expressjs/serve-index
Если файлы, которые вы хотите получить в списке, находятся в /images не в вашем server.js, вы можете добавить что-то вроде:
const express = require('express');
const app = express();
const path = require('path');
// Allow assets directory listings
const serveIndex = require('serve-index');
app.use('/images', serveIndex(path.join(__dirname, '/images')));
Использование:
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: указанный выше исходный код не проверен.
Это способ добавить дополнительные расширения файлов, в примере, приведенном Roy M 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
В этом примере я добавил еще несколько файлов.
Вот один из способов сделать это. Он также делает небольшой 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
Если, как и в моем случае, вы хотите загрузить изображения из локальной папки на своей собственной машине, тогда есть простой способ сделать это с помощью очень короткого командного файла 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 самостоятельно.
ПРИМЕЧАНИЕ:.bat - это исполняемый тип в Windows, поэтому перед их запуском откройте их в текстовом редакторе, если вы загружаетесь из какого-то случайного интернет-канала, подобного этому.
Если вы используете Linux или OSX, вы, вероятно, можете сделать что-то похожее на пакетный файл и создать правильно отформатированную строку javascript без какой-либо из флагов mlString.
$(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.
Вы можете изменить каталог и имена файлов по своему усмотрению.
Вы не можете сделать это автоматически. Ваш JS не может видеть файлы в том же каталоге, что и он.
Самый простой - это, возможно, дать список этих имен изображений для вашего JavaScript.
В противном случае вы можете получить список каталогов с веб-сервера с помощью JS и проанализировать его, чтобы получить список изображений.
В jQuery вы можете использовать Ajax для вызова серверной стороны script. Серверная сторона script найдет все файлы в папке и вернет их в ваш html файл, где вам потребуется обработать возвращенную информацию.
Вы можете использовать fs.readdir или fs.readdirSync для получения имен файлов в каталоге.
Разница между двумя методами заключается в том, что первый из них асинхронен, поэтому вам необходимо предоставить функцию обратного вызова, которая будет выполняться при завершении процесса чтения.
Второй синхронный, он вернет массив имен файлов, но он прекратит любое дальнейшее выполнение вашего кода до тех пор, пока процесс чтения не завершится.
После этого вам просто нужно перебирать имена и использовать функцию append, добавлять их в соответствующие места. Чтобы узнать, как это работает, см. HTML DOM и ссылка на JS
Добавьте следующий script:
<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
*/});
Используя 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>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>
Основываясь на ответе Roko C. Buljan, я создал этот метод, который получает изображения из папки и ее подпапок. Это может потребовать некоторой обработки ошибок, но отлично работает для простой структуры папок.
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
});
}
Если вы заинтересованы в том, чтобы сделать это без jQuery - вот чистый вариант ответа JS (отсюда) ответа, который в настоящее время наиболее популярен:
var xhr = new XMLHttpRequest();
xhr.open("GET", "/img", true);
xhr.responseType = 'document';
xhr.onload = () => {
if (xhr.status === 200) {
var elements = xhr.response.getElementsByTagName("a");
for (x of elements) {
if ( x.href.match(/\.(jpe?g|png|gif)$/) ) {
let img = document.createElement("img");
img.src = x.href;
document.body.appendChild(img);
}
};
}
else {
alert('Request failed. Returned status of ' + xhr.status);
}
}
xhr.send()