Блог

Главная - Вопросы по программированию - Как я могу автоматически загрузить несколько изображений из локальной папки с помощью javascript / jquery?

Как я могу автоматически загрузить несколько изображений из локальной папки с помощью javascript / jquery?

#javascript #jquery #image #gallery #offline

#javascript #jquery #изображение #Галерея #Не в сети

Вопрос:

Я пытаюсь создать автономный просмотрщик изображений (возможно, менеджер тоже, но позже). Итак, я хотел бы автоматически загружать несколько изображений из папки, не объявляя их в html (т. Е. без использования для каждого изображения). Возможно ли это с использованием только javascript / jquery и без серверных языков (например, php)? Заранее спасибо!

Ответ №1:

Я не совсем понимаю, но я не думаю, что вы действительно можете читать файлы, используя javascript. По крайней мере, на стороне клиента с использованием необработанного javascript. Однако вы можете загрузить некоторые файлы, а затем сохранить их в том конкретном приложении, которое вы создаете

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

Если вы хотите загружать файлы, используя необработанный ванильный javascript, вы можете сделать это следующим образом…

 <input id="image-file" type="file" />

Затем обработайте это с помощью javascript следующим образом

 document.getElementById("image-file").addEventListener('onclick', function(e){
  const file = e.target.files[0];
  // your code
})

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

Комментарии:

1. Я понимаю вашу точку зрения. Конечно, если javascript сможет проникнуть в чьи-то локальные папки, это будет настоящий беспорядок … извините за глупый вопрос, я не разработчик, просто любитель поделок ;). Я попробую эти два предложения. Большое вам спасибо за вашу помощь (и быструю помощь!) и за то, что вы были так добры и понятны. Отличной недели, Адиб Мохсин!

Ответ №2:

Вы можете создать настольное приложение из проекта javascript с помощью electronjs. Вы также можете читать файлы и манипулировать ими.

Например, VSCode или Spotify созданы таким же образом.

Проверьте https://electronjs.org / если интересно.

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

Ответ №3:

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

 <!DOCTYPE html>
<html>
<head>
<script 

src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$('#image-file').change(function(e){
for(let i=0;i<e.target.files.length;i  )
{
  let file = e.target.files[i];

$("body").append('<img src="' URL.createObjectURL(file) '">');


}
});
});


</script>
</head>
<body>
<input id="image-file" type="file" multiple/>

</body>
</html>