Где можно скачать готовый загрузчик файлов?

Question

[Анна]

У меня на сайте есть форма, которая работает, но меня не очень устраивает этот вариант.
Пользователь не видит, что файлы загружены. То есть если файл большой и он не успел загрузиться, а пользователь уже закрыл вкладку с формой, то файлы не отправится. Мне очень нравится форма, где можно перетаскивать файлы в поле и видеть при этом как заполняется зеленым линия загрузки файлов. Это наглядно, и так пользователь точно не уйдет со страницы до полной загрузки файлов.

Где взять такую форму с загрузчиком? Написать сама я не могу, поэтому ищу готовое решение)

Comments

[Василий]

а CMS у вас какая или фреймфорк ?

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.3.4

[Анна]

Василий, у меня сайт предполагался на Word Press, но натянуть верстку на ворд пресс не получилось, что-то пошло не так. И теперь хостинг с вордпрессом, конечно, связан. Можно создать страницу на вордпрессе, и она будет на домене моего сайта. Но считать, что сайт работает на Вордпрессе, наверное, нельзя)
Технически, это все выглядит довольно примитивно: документы html, css, php, js лежат в папке, это и есть сайт... кошмар, 2023 год, а у меня статичный сайт

[Василий]

https://ruseller.com/lessons.php?id=2200
выбирайте установка и настройка особо сложностей не вызывает.

[Анна]

Василий, Спасибо большое! буду стараться разобраться с этим

Answer 1

[Дмитрий]

Возьмите плагин dropzone, там хорошая дока

Comments

[Анна]

Спасибо большое! А с учетом того, что у меня статичный сайт, он будет работать?
У меня так и не получилось натянуть верстку на вордпресс, и теперь вордпресс существует сам по себе, а папка с сайтом - отдельно.
Простите за идиотские вопросы, очень много с чем приходится разбираться в последнее время)

[Дмитрий]

Анна, у этого плагина в любом случае должен быть url backend обработчика. Фронт не знает ничего про устройство бэка и не умеет туда класть файлы без какого-либо «приемника». Просто этот плагин много чего умеет и в том числе, показывать прогрессбар.

[Анна]

Дмитрий, Спасибо! я правильно поняла, что надо подключить этот плагин к уже существующему на странице php коду? Понимаю, что тут не место для обучения и лекций, поэтому просто спрошу, возможен ли такой вариант. у меня есть код вот такой:

<?php
if (isset ($_POST['contactFF'])) {
  $to = "[e-mail]"; // поменять на свой электронный адрес
  $from = $_POST['contactFF'];
  $subject = "Заполнена контактная форма с ".$_SERVER['HTTP_REFERER'];
  $message = "Имя: ".$_POST['nameFF']."\nEmail: ".$from."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['messageFF'];
  $boundary = md5(date('r', time()));
  $filesize = '';
  $headers = "MIME-Version: 1.0\r\n";
  $headers .= "From: " . $from . "\r\n";
  $headers .= "Reply-To: " . $from . "\r\n";
  $headers .= "Content-Type: multipart/mixed; boundary=\"$boundary\"\r\n";
  $message="
Content-Type: multipart/mixed; boundary=\"$boundary\"

--$boundary
Content-Type: text/plain; charset=\"utf-8\"
Content-Transfer-Encoding: 7bit

$message";
  for($i=0;$i<count($_FILES['fileFF']['name']);$i++) {
     if(is_uploaded_file($_FILES['fileFF']['tmp_name'][$i])) {
         $attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name'][$i])));
         $filename = $_FILES['fileFF']['name'][$i];
         $filetype = $_FILES['fileFF']['type'][$i];
         $filesize += $_FILES['fileFF']['size'][$i];
         $message.="

--$boundary
Content-Type: \"$filetype\"; name=\"$filename\"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=\"$filename\"

$attachment";
     }
   }
   $message.="
--$boundary--";

  if ($filesize < 10000000) { // проверка на общий размер всех файлов. Многие почтовые сервисы не принимают вложения больше 10 МБ
    mail($to, $subject, $message, $headers);
    echo $_POST['nameFF'].', Ваше сообщение получено, спасибо!';
  } else {
    echo 'Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.';
  }
}
?>

Я могу сделать с помощью этого плагина прогресс бар, чтобы бэкэндом был этот код, а внешне он выглядел с полем для перетаскивания и прогресс баром?

[Анна]

Дмитрий, Спасибо! я правильно поняла, что надо подключить этот плагин к уже существующему на странице php коду? Понимаю, что тут не место для обучения и лекций, поэтому просто спрошу, возможен ли такой вариант. у меня есть код вот такой:

<?php
if (isset ($_POST['contactFF'])) {
  $to = "[e-mail]"; // поменять на свой электронный адрес
  $from = $_POST['contactFF'];
  $subject = "Заполнена контактная форма с ".$_SERVER['HTTP_REFERER'];
  $message = "Имя: ".$_POST['nameFF']."\nEmail: ".$from."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['messageFF'];
  $boundary = md5(date('r', time()));
  $filesize = '';
  $headers = "MIME-Version: 1.0\r\n";
  $headers .= "From: " . $from . "\r\n";
  $headers .= "Reply-To: " . $from . "\r\n";
  $headers .= "Content-Type: multipart/mixed; boundary=\"$boundary\"\r\n";
  $message="
Content-Type: multipart/mixed; boundary=\"$boundary\"

--$boundary
Content-Type: text/plain; charset=\"utf-8\"
Content-Transfer-Encoding: 7bit

$message";
  for($i=0;$i<count($_FILES['fileFF']['name']);$i++) {
     if(is_uploaded_file($_FILES['fileFF']['tmp_name'][$i])) {
         $attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name'][$i])));
         $filename = $_FILES['fileFF']['name'][$i];
         $filetype = $_FILES['fileFF']['type'][$i];
         $filesize += $_FILES['fileFF']['size'][$i];
         $message.="

--$boundary
Content-Type: \"$filetype\"; name=\"$filename\"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=\"$filename\"

$attachment";
     }
   }
   $message.="
--$boundary--";

  if ($filesize < 10000000) { // проверка на общий размер всех файлов. Многие почтовые сервисы не принимают вложения больше 10 МБ
    mail($to, $subject, $message, $headers);
    echo $_POST['nameFF'].', Ваше сообщение получено, спасибо!';
  } else {
    echo 'Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.';
  }
}
?>

Я могу сделать с помощью этого плагина прогресс бар, чтобы бэкэндом был этот код, а внешне он выглядел с полем для перетаскивания и прогресс баром?

Answer 2

[Сергей П]

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

Однако, если совсем пофиг на интеграцию с существующими интерфейсами и сайтом, то можно взять любой пример с самым классическим аплоадом из любого фреймворка прям по документации, и поднять его в изолированном докер-контейнере. У вас получится отдельная изолированная страница, вы зароутите её на отдельный адрес через ваш обратный прокси (например nginx), и будет у вас колхоз, но с прогрессбаром.

Если вам не понятно то, что я тут рассказал, то, увы... Пока что вам будет не по силам такое реализовать. Опыта и знаний маловато. Учитесь, или идите к фрилансерам, ну или более детально формулируйте свой вопрос. Потому что по нынешней его формулировке выходит, что вам нужна подробная индивидуальная лекция о том, как работают веб-приложения, причем для совершенно неподготовленного человека. Это часов 15 индивидуальных занятий.
Вы же понимаете, что этот ресурс не про такое?

Comments

[Анна]

Спасибо большое за подробный ответ! Я представляла себе это немного по-другому: что есть некий код, который это выполняет, и который не составит труда закинуть в папку сайта) Теперь я поняла, что даже не полезу туда, мне это не по силам) Буду искать другое решение

[Сергей П]

Анна, возможно такой код и есть даже готовый, и возможно его можно просто докинуть в папку с сайтом, но для ответа на такой вопрос нужно знать хотя бы на чем реализован сайт. Фреймворков бывает разных очень много. Для каких-то может быть реализован плагин, добавляющий прогресс на загрузку. Но вы не предоставили никаких сведений про то, как у вас реализована форма загрузки, чтобы специалисты соответствующего фреймворка могли вам ответить конструктивно.

[Анна]

Сергей П, фреймворка нет) посадить сайт на вордпресс не получилось, поэтому они существуют отдельно друг от друга. То есть вордпресс есть, но через него нельзя вносить изменения в сайт... Вот при таком раскладе можно вставить плагин dropzone на сайт? Извините за идиотские вопросы)
собственно сайт: https://antik88.ru/