Загрузка файлов. Создание безупречной формочки

@CEBEP · Регистрация: 21.03.2010

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

Здравствуйте. У меня есть альтруистический ресурсик http://rk5.bmstu.ru/repository/ , и создан он с целью обмена файлами. И всё бы ничего, но как работает загрузка файлов, мне не очень нравится. Во первых по одному. Заготавливать большую батарею из инпутов не хочется а дельный алгоритм добавления мне с ходу написать не удалось. Во вторых, при текущем способе закачки файлов, информация о прогрессе передачи файла выводится только в хроме и то довольно таки незаметно. Идеальным решением было бы иметь в начале input[text] с именем и input[buton] c "выбрать файл", которые при заполнении бы увеличивались в количестве на единицу.
Безусловно, гуглил но в ответ получал или негодную чушь (скажем, в статье о добавлении элемента в DOM не объяснялось как наделить добавляемый элемент свойством реагировать на onchange) или объёместые статейки с большими неуклюжими кодами в которых что-то может понять только автор. В целом, окончательным своё мнение по этому вопросу не считаю. Но никто не уговорит меня использовать для закачки решения на флэш. Буду рад разумной критике по проекту в целом.

@GuardCat · 10.01.2012, 11:32

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

...скажем, в статье о добавлении элемента в DOM не объяснялось как наделить добавляемый элемент свойством реагировать на onchange...

JavaScript
1
2
3
4
5
var input = document.createElement("input");
input.type = "text";
input.onchange = function () {
     alert("Ты меня изменил, подлец!");
};

@CEBEP · 10.01.2012, 12:30 **[ТС]**

так я делал но что-то не срослось. какие-то проблемы с рекурсией. По моему, я писал что-то типа

JavaScript
1
2
3
4
5
6
newItem()
{
    var input = document.createElement("input");
    input.type = "text";
    input.onchange = newItem;
}

и там вместо присвоения вызывалась сама newItem... Короче, не в этом суть. Цель - разобраться как сделать хорошую формочку для отправки файлов. А как её размножать - дело явно не слишком сложное.

@GuardCat · 10.01.2012, 13:46

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

дельный алгоритм добавления мне с ходу написать не удалось

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

А как её размножать - дело явно не слишком сложное.

Так вам не это надо?

Вообще делается обычно так:
1. Создаём набор функций, которые будут реагировать на изменения в полях.
2. Приделываем каждому новому полю нужный набор функций. В отдельной функции. И никакой рекурсии.

Добавлено через 23 минуты
Надо как-то так?

HTML5
1
2
3
4
5
6
7
8
<!DOCTYPE HTML>
<html>
<body>   
  <form name="fileGetter">
    <input type = "file"><br>
    <input type = "submit" value = "Загрузить файл(ы)" name = "submitIt">
  </form>
  <script>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function () {
      var 
          input, br, lastElement = document.forms.fileGetter.submitIt
      ;
      function addRow() {
        input = document.createElement("input");
        br = document.createElement("br");
        input.type = "file";
        input.onchange = this.onchange;
        document.forms.fileGetter.insertBefore(input, lastElement);
        document.forms.fileGetter.insertBefore(br, lastElement);
        this.onchange = "";
      }
      document.forms.fileGetter.getElementsByTagName("input")[0].onchange = addRow;
    })()

HTML5
1
2
3
  </script>
</body>
</html>

Живой пример можно посмотреть тут.

@CEBEP · 10.01.2012, 14:32 **[ТС]**

как я вижу:
стандартное поле input[file] не используется - к нему не применяются стили. По этому создаются два поля: input[text] и input[button]"Выбирите файл". По щелчку на любое из них вызывается диалог выбора файла, имя которого по завершении попадает в text. Если изменено последнее поле из созданных на данный момент, добавляется ещё одно. После всей этой хрени по клику в специально заготовленную кнопку "Загрузить" начинается загрузка файла а вместо кнопок "Выбирите файл" появляются прогрессбары отражающие процесс загрузки. Но это в идеале. После завершения загрузки инициируется полное обновление страницы.
Трудно: реализовать структуру из input[text] и input[button]"Выбирите файл", организовать загрузку файлов так, чтобы иметь и выводить информацию о степени загрузки.
Извините что плохо формулирую - сонный

Новые блоги и статьи Все статьи Все блоги /
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@CEBEP 108 / 108 / 23 Регистрация: 21.03.2010 Сообщений: 445

	Загрузка файлов. Создание безупречной формочки 10.01.2012, 06:14. Показов 1624. Ответов 4 Метки нет (Все метки) Здравствуйте. У меня есть альтруистический ресурсик http://rk5.bmstu.ru/repository/ , и создан он с целью обмена файлами. И всё бы ничего, но как работает загрузка файлов, мне не очень нравится. Во первых по одному. Заготавливать большую батарею из инпутов не хочется а дельный алгоритм добавления мне с ходу написать не удалось. Во вторых, при текущем способе закачки файлов, информация о прогрессе передачи файла выводится только в хроме и то довольно таки незаметно. Идеальным решением было бы иметь в начале input[text] с именем и input[buton] c "выбрать файл", которые при заполнении бы увеличивались в количестве на единицу. Безусловно, гуглил но в ответ получал или негодную чушь (скажем, в статье о добавлении элемента в DOM не объяснялось как наделить добавляемый элемент свойством реагировать на onchange) или объёместые статейки с большими неуклюжими кодами в которых что-то может понять только автор. В целом, окончательным своё мнение по этому вопросу не считаю. Но никто не уговорит меня использовать для закачки решения на флэш. Буду рад разумной критике по проекту в целом. 0

@CEBEP 108 / 108 / 23 Регистрация: 21.03.2010 Сообщений: 445
	10.01.2012, 14:32 [ТС]
	как я вижу: стандартное поле input[file] не используется - к нему не применяются стили. По этому создаются два поля: input[text] и input[button]"Выбирите файл". По щелчку на любое из них вызывается диалог выбора файла, имя которого по завершении попадает в text. Если изменено последнее поле из созданных на данный момент, добавляется ещё одно. После всей этой хрени по клику в специально заготовленную кнопку "Загрузить" начинается загрузка файла а вместо кнопок "Выбирите файл" появляются прогрессбары отражающие процесс загрузки. Но это в идеале. После завершения загрузки инициируется полное обновление страницы. Трудно: реализовать структуру из input[text] и input[button]"Выбирите файл", организовать загрузку файлов так, чтобы иметь и выводить информацию о степени загрузки. Извините что плохо формулирую - сонный 0