Создать кнопку сохранить все фотографии

@kukush · Регистрация: 11.02.2014

Студворк — интернет-сервис помощи студентам

В div блоке хранятся изображения img их может быть 1-20.
Подскажите как создать кнопку что бы из div блока сохранить все img ?

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="row no-gutters mb-2 rounded">
        <a class="col-4 images-kor-5bIu5Iphd63wLP" href="">
            <img src="" class="img-thumbnail" alt="">
        </a>
 
 
        <a class="col-4 images-kor-5bIu5Iphd63wLP" href="">
            <img src="" class="img-thumbnail" alt="">
        </a>
</div>
<button class="btn">Скачать файл</button>

@ft4l · 22.04.2024, 20:49

Сообщение от kukush

все img

как вариант

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="ru"><head>
    <title>Index</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="/sys/CSS.css" />
    <script type="text/javascript">
function getConfirmation(src) {
    var link, retVal = confirm(src + " Do you want to download ?");
    if( retVal == true ) {
        link = document.createElement('A');
        link.href = src;
        link.download = src.substr(src.lastIndexOf('/') + 1);
        link.click();
        return true;
    }
    return false;
}
function getImgs(btn){
    var i=0, imgs =btn.previousElementSibling.getElementsByTagName('IMG'); 
    for(;i<imgs.length; ++i) getConfirmation(imgs[i].src)
}
    </script>
</head>
<body>
<header>
    <h2>Index</h2>
</header>
<main>
 
<div class="row no-gutters mb-2 rounded">
        <a class="col-4 images-kor-5bIu5Iphd63wLP" href="">
            <img src="/favicon.ico" class="img-thumbnail" alt="">
        </a>
 
 
        <a class="col-4 images-kor-5bIu5Iphd63wLP" href="">
            <img src="/favicon.ico" class="img-thumbnail" alt="">
        </a>
</div>
<button class="btn" onclick="getImgs(this)">Скачать файл</button>
 
</main>
</body></html>

Добавлено через 5 минут
... opera 12 открывает вместо диалога сохранения

Добавлено через 1 минуту
... IE11 молча ничего не делает ))

@mr_dramm · 22.04.2024, 21:56

Создать zip с помощью jszip

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create ZIP Archive with Images</title>
</head>
<body>
 
<img src="img/1.jpg" class="photo">
<img src="img/2.jpg" class="photo">
<img src="img/3.jpg" class="photo">
 
<button id="createZipButton">Create ZIP Archive</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js" integrity="sha512-csNcFYJniKjJxRWRV1R7fvnXrycHP6qDR21mgz1ZP55xY5d+aHLfo9/FcGDQLfn2IfngbAHd8LdfsagcCqgTcQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js" integrity="sha512-XMVd28F1oH/O71fzwBnV7HucLxVwtxf26XV8P4wPk26EDxuGZ91N8bsOttmnomcCD3CS5ZMRL50H0GgOHvegtg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
document.getElementById('createZipButton').addEventListener('click', () => {
    const images = document.querySelectorAll('.photo');
    if (images.length === 0) {
        alert('No images found.');
        return;
    }
 
    const zip = new JSZip();
    const promises = [];
 
    images.forEach((image, index) => {
        const imageUrl = image.src;
        const fileName = `photo_${index + 1}.jpg`;
 
        const promise = fetch(imageUrl)
            .then(response => response.blob())
            .then(blob => zip.file(fileName, blob));
        promises.push(promise);
    });
 
    Promise.all(promises).then(() => {
        zip.generateAsync({ type: 'blob' }).then((content) => {
            saveAs(content, 'photos.zip');
        });
    });
});
</script>
</body>
</html>

так как картинки загружабтся с помощью fetch нужно чтобы они загржжались без нарушения CORS

@voraa · 23.04.2024, 08:34

Сообщение от kukush

сохранить все img

Сохранить куда? Себе в файл? Сохранить на сервере?

@kukush · 23.04.2024, 15:06 **[ТС]**

Необходимо сохранить с сервера к себе на устройство

Добавлено через 5 минут

Сообщение от ft4l

...

На каждую фотографию есть вопрос - Сохранить Да/Нет. Можно это обойти ?

@voraa · 23.04.2024, 15:49

Сообщение от kukush

Можно это обойти ?

Нет.

@mr_dramm · 23.04.2024, 18:27

Сообщение от kukush

На каждую фотографию есть вопрос - Сохранить Да/Нет. Можно это обойти ?

Если применительно к предложенному коду, то нет. Но можно использовать File System API , в этом апи есть возможность отрыть диалог выбора директории, создать несколько файлов, если встерится файл с похожим именем прибавить к имени число(стандантное поедение при сохраниении файлов с одинаковыми именами). Поддержка браузерами

@voraa · 23.04.2024, 18:27

Сообщение от mr_dramm

Но можно использовать File System API , в этом апи есть возможность отрыть диалог выбора директории, просканировать выбранную директорию определеть какие файлы в ней уже имеются и создать несколько файлов,

А вы пробовали сами работать с этим API?
Я не пробовал, но из чтения документаций и спецификаций понял, что все равно будут запрашиваться разрешения на доступ к файлам в виде диалоговых окон.
Без разрешений только доступ к "частной" файловой системе, но она не видна из-вне браузера (Ну типа как indexedDB, или localStorage)

@mr_dramm · 23.04.2024, 18:53

Сообщение от voraa

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

Конечно будут запрашивать разрешения для доступа к директории, да пробовал

@voraa · 23.04.2024, 19:08

Сообщение от mr_dramm

Конечно будут запрашивать разрешения для доступа к директории, да пробовал

И что, потом в эту директорию можно писать что угодно без всяких разрешений?
Просто в доке написано, что дополнительно запрашивается при записи
https://fs.spec.whatwg.org/#ap... filehandle

This operation requires write permission, even if the file being returned already exists. If this handle doesn’t already have write permission, this could result in a prompt being shown to the user.
Для этой операции требуется разрешение на запись, даже если возвращаемый файл уже существует. Если у этого дескриптора еще нет разрешения на запись, пользователю может быть показано приглашение.

@ft4l · 23.04.2024, 19:49

Сообщение от voraa

Нет.

Возможно ТС-у не понравилось ещё одно лишнее нажатие кнопки,
то которе из-за

Сообщение от ft4l

retVal = confirm(src + " Do you want to download ?")

Там ещё от настроек браузера бывает сначала "открыть или сохранить" и потом только выбор места.

Сообщение от kukush

обойти

оно, как мне кажется, предотвращало начало загрузки файла, до того как юзер выбрал путь+имя...
Возможно замечали, что пока что-то выбирается в диалоге выборе места сохранения, по сети уже что-то грузит
, и если "Отмена", то это работает как прерывание соединения.
+ как-бы ставит старты скачивания в очередь... но диалог сохранения может и ведёт себя так-же... типа очереди

у меня практически для всего включено сохранять, и спрашивать куда.
... даже мысли никогда такой не возникало,) что грузить всегда всё надо в папку "Загрузки"))
Но бывает и такое... плюс помню раньше менеджерыЗагрузок можно было в браузерах задействовать... ещё варианты

@mr_dramm · 23.04.2024, 22:55

voraa, с таким кодом задается два запроса один на разрешение читать файлы из директории и второй запрос на редактирования фалов в директории

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Save Images to Directory</title>
  </head>
  <body>
    <img src="img/1.jpg" class="photo" />
    <img src="img/2.jpg" class="photo" />
    <img src="img/3.jpg" class="photo" />
    <img src="img/4.jpg" class="photo" />
    <button id="saveImagesButton">Save Images to Directory</button>
    <script>
      document
        .getElementById("saveImagesButton")
        .addEventListener("click", async () => {
          const images = document.querySelectorAll(".photo");
          if (images.length === 0) {
            alert("No images found.");
            return;
          }
 
          try {
            const directoryHandle = await window.showDirectoryPicker();
 
            const existingFiles = [];
            for await (const entry of directoryHandle.values()) {
              existingFiles.push(entry.name);
            }
 
            images.forEach(async (image, index) => {
              const imageUrl = image.src;
              const fileName = `photo_${index + 1}.jpg`;
 
              const response = await fetch(imageUrl);
              if (!response.ok) {
                throw new Error(`Failed to fetch ${imageUrl}`);
              }
              const fileData = await response.blob();
 
              let newFileName = fileName;
              let count = 1;
              while (existingFiles.includes(newFileName)) {
                newFileName = `${fileName.replace(".jpg", `_${count}.jpg`)}`;
                count++;
              }
 
              const fileHandle = await directoryHandle.getFileHandle(
                newFileName,
                { create: true },
              );
              const writable = await fileHandle.createWritable();
              await writable.write(fileData);
              await writable.close();
 
              console.log(`Saved ${newFileName}`);
            });
 
            // alert('Images saved successfully.');
          } catch (error) {
            console.error("Error saving images:", error);
            // alert('An error occurred while saving images.');
          }
        });
    </script>
  </body>
</html>

@voraa · 23.04.2024, 23:26

Сообщение от mr_dramm

voraa, с таким кодом задается два запроса один на разрешение читать файлы из директории и второй запрос на редактирования фалов в директории

Понял.
Попробовал. Так и работает.
Спасибо

Добавлено через 12 минут
Работает, но только в Хроме.

Добавлено через 12 минут
И только на десктопе
https://caniuse.com/?search=showDirectoryPicker

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .