{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Чтобы добавить возможность "},{"type":"text","marks":[{"type":"bold"}],"text":"загрузки картинки (или любого файла)"},{"type":"text","text":" через HTML-форму, используется элемент"},{"type":"hardBreak"},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Этот тип создаёт кнопку "},{"type":"text","marks":[{"type":"bold"}],"text":"«Выбрать файл»"},{"type":"text","text":", через которую пользователь может выбрать изображение со своего устройства, а браузер отправит его на сервер вместе с остальными данными формы."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 1. Базовый пример формы загрузки картинки"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 Что здесь важно:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"type=\"file\""},{"type":"text","text":" — создаёт кнопку выбора файла;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"name=\"image\""},{"type":"text","text":" — имя, под которым файл будет отправлен на сервер;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"accept=\"image/*\""},{"type":"text","text":" — разрешает выбирать только изображения (jpg, png, gif и т.д.);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"enctype=\"multipart/form-data\""},{"type":"text","text":" — обязательный атрибут формы для передачи файлов;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"method=\"post\""},{"type":"text","text":" — нужен, чтобы передавать бинарные данные (файлы)."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 2. Разбор ключевых частей"}]},{"type":"heading","attrs":{"textAlign":null,"level":4},"content":[{"type":"text","text":"✅ "},{"type":"text","marks":[{"type":"code"}],"text":""}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Создаёт интерфейс для выбора файла:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Можно выбрать один файл."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Чтобы разрешить выбор "},{"type":"text","marks":[{"type":"bold"}],"text":"нескольких"},{"type":"text","text":", добавьте атрибут "},{"type":"text","marks":[{"type":"code"}],"text":"multiple"},{"type":"text","text":":"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":4},"content":[{"type":"text","text":"✅ Атрибут "},{"type":"text","marks":[{"type":"code"}],"text":"accept"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ограничивает тип загружаемых файлов."}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Значение"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что разрешает загружать"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"image/*"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Все типы изображений"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":".jpg,.png,.gif"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Только указанные форматы"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"video/*"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Видео"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"audio/*"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Аудио"}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 Пример:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":4},"content":[{"type":"text","text":"✅ Атрибут "},{"type":"text","marks":[{"type":"code"}],"text":"enctype"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Форма с файлами "},{"type":"text","marks":[{"type":"bold"}],"text":"обязательно"},{"type":"text","text":" должна содержать:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"enctype=\"multipart/form-data\"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это сообщает браузеру, что нужно упаковать данные особым образом — иначе файл не дойдёт до сервера корректно."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 3. Пример с несколькими файлами"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пользователь сможет выбрать сразу несколько картинок."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 4. Что произойдёт при отправке"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если пользователь выбрал файл "},{"type":"text","marks":[{"type":"code"}],"text":"photo.jpg"},{"type":"text","text":", браузер отправит его вместе с другими данными формы:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Content-Disposition: form-data; name=\"image\"; filename=\"photo.jpg\"\nContent-Type: image/jpeg\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сервер сможет принять и сохранить файл (например, через PHP, Python Flask, Node.js и т.д.)."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 5. Добавление предпросмотра (необязательно)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Можно показать миниатюру картинки перед загрузкой с помощью JavaScript:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n\n\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Теперь выбранная картинка сразу появится на странице перед отправкой."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"💡 Итого:"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Элемент"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Назначение"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Поле выбора файла"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"accept"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ограничивает тип файлов (например, "},{"type":"text","marks":[{"type":"code"}],"text":"image/*"},{"type":"text","text":")"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"multiple"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Разрешает выбрать несколько файлов"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"enctype=\"multipart/form-data\""}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Обязательный атрибут формы для передачи файлов"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"method=\"post\""}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Используется при отправке файлов"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"name"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Имя поля, под которым файл отправляется на сервер"}]}]}]}]},{"type":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Простыми словами:"},{"type":"hardBreak"},{"type":"text","text":"Чтобы добавить загрузку картинки —"},{"type":"hardBreak"},{"type":"text","text":"достаточно написать:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"А чтобы отправить её на сервер — обернуть это поле в форму с "},{"type":"text","marks":[{"type":"code"}],"text":"method=\"post\""},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"enctype=\"multipart/form-data\""},{"type":"text","text":"."}]}]}

Как добавить в форму загрузку картинки в HTML?

Комментарии