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

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

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

Дополнительно:

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

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

• Спасибо большое! А с учетом того, что у меня статичный сайт, он будет работать?
  У меня так и не получилось натянуть верстку на вордпресс, и теперь вордпресс существует сам по себе, а папка с сайтом - отдельно.
  Простите за идиотские вопросы, очень много с чем приходится разбираться в последнее время)
• Анна, у этого плагина в любом случае должен быть url backend обработчика. Фронт не знает ничего про устройство бэка и не умеет туда класть файлы без какого-либо «приемника». Просто этот плагин много чего умеет и в том числе, показывать прогрессбар.
• Дмитрий, Спасибо! я правильно поняла, что надо подключить этот плагин к уже существующему на странице php коду? Понимаю, что тут не место для обучения и лекций, поэтому просто спрошу, возможен ли такой вариант. у меня есть код вот такой:

  <?php if (isset ($_POST['contactFF'])) { $to = "info@antik88.ru"; // поменять на свой электронный адрес $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.0rn"; $headers .= "From: " . $from . "rn"; $headers .= "Reply-To: " . $from . "rn"; $headers .= "Content-Type: multipart/mixed; boundary="$boundary"rn"; $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 if (isset ($_POST['contactFF'])) { $to = "info@antik88.ru"; // поменять на свой электронный адрес $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.0rn"; $headers .= "From: " . $from . "rn"; $headers .= "Reply-To: " . $from . "rn"; $headers .= "Content-Type: multipart/mixed; boundary="$boundary"rn"; $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 = "info@antik88.ru"; // поменять на свой электронный адрес $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.0rn"; $headers .= "From: " . $from . "rn"; $headers .= "Reply-To: " . $from . "rn"; $headers .= "Content-Type: multipart/mixed; boundary="$boundary"rn"; $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 if (isset ($_POST['contactFF'])) { $to = "info@antik88.ru"; // поменять на свой электронный адрес $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.0rn"; $headers .= "From: " . $from . "rn"; $headers .= "Reply-To: " . $from . "rn"; $headers .= "Content-Type: multipart/mixed; boundary="$boundary"rn"; $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 МБ.'; } } ?>

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

Ответы:

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

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

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

• Спасибо большое за подробный ответ! Я представляла себе это немного по-другому: что есть некий код, который это выполняет, и который не составит труда закинуть в папку сайта) Теперь я поняла, что даже не полезу туда, мне это не по силам) Буду искать другое решение
• Анна, возможно такой код и есть даже готовый, и возможно его можно просто докинуть в папку с сайтом, но для ответа на такой вопрос нужно знать хотя бы на чем реализован сайт. Фреймворков бывает разных очень много. Для каких-то может быть реализован плагин, добавляющий прогресс на загрузку. Но вы не предоставили никаких сведений про то, как у вас реализована форма загрузки, чтобы специалисты соответствующего фреймворка могли вам ответить конструктивно.
• Сергей П, фреймворка нет) посадить сайт на вордпресс не получилось, поэтому они существуют отдельно друг от друга. То есть вордпресс есть, но через него нельзя вносить изменения в сайт... Вот при таком раскладе можно вставить плагин dropzone на сайт? Извините за идиотские вопросы)
  собственно сайт: https://antik88.ru/