Загрузка изображения перед его загрузкой. Как это делают?

Question

[grabbee]

Например делается пост. И в нем добавляется картинка. Но она загружается раньше публикации самого поста (пока текст набирается, картинку уже видно). То есть, к моменту сохранения самого поста, картинка уже как бы загружена. Но если пост не сохранять, то наверное и картинка не сохранится.

Как это делается? Как это называется? Где почитать?
Пример: discourse - создание поста

Comments

[Дмитрий Кузнецов]

То же интересовался этой темой. Сам ни чего не нашёл. Так что подписался, думаю тут дадут ответ)

Предполагаю, что загруженное фото хранится в бд и файловой системе при загрузке, но потом каким-то образом (через доп запрос к бд при добавление поста) привязывается к самому посту.

[grabbee]

Я проверил. discourse тоже сразу в хранилище загружает и до сих пор не удалил. Хотя я пост не сохранял. Нажал "отмена". И он всё равно картинку удалять не стал. Доступна по прямой ссылке.

Answer 1

[Игорь Воротнёв]

Для начала решите, что вам на самом деле нужно - предварительный просмотр изображения (чтобы выглядело как будто картинка загружена, пользователь видел ее в контенте который пишет) или реальная загрузка изображения на сервер. В зависимости от ответа будет разная техника.

Осознанно учтите и взвесьте основные минусы загрузки на сервер. Самая главная - картинки на сервере будут накапливаться и вам придется разрабатывать систему определения "нужных" и "ненужных" а также механизм автоматического удаления ненужных. Потому что мусора будет много. Кто-то писал черновик и не опубликовал / закрыл окно и забил, а картинка (или даже несколько) уже загружена. Кто-то загрузил одну картинку, посмотрел, не понравилось, выбрал и загрузил другую. И так 10 раз подряд пока не подобрал картинку которая нравится. А у вас 9 ненужных картинок на сервере загружено. Через некоторое время у вас папка с загрузками вырастает до гигабайтов / тысяч файлов, вы смотрите на это и реально не понимаете что из этого используется, а что нет.

Исходя из этого, в большинстве случае все, что вам нужно это предварительный просмотр на клиенте с помощью javascript. Это можно сделать ванильным js или использовать адекватную библиотеку типа https://github.com/blueimp/JavaScript-Load-Image которая уже решает кучу мелких задач, о которых вы еще даже не догадываетесь (например автоматический поворот по метаданным, ресайз превью в целях оптимизации производительности, crossorigin и тд).

Если же все-таки вы решите грузить из сразу на сервер, то начните с минимального ТЗ. Используете ли вы какую-то CMS или фреймворк. Куда и как будете загружать файлы. Как будете хранить историю загруженных и очищать ненужные. И так далее. Сам процесс загрузки тривиален - у вас должен быть URL который методом PUT или POST принимает данные (изображение + любую полезную инфу, например ID/UUID черновика записи к которому картинка загружена), обрабатывает их и возвращает URL изображения. Аяксом туда шлете картинку, получаете ответ с адресом картинки на сервере, вставляете его в DOM.

Answer 2

[Северное Сияние]

Я так делал.

Рисуется скрытый фрейм:

<iframe width="0" height="0" name="iframe"></iframe>

Рисуется форма ПОСЛЕ основной формы поста:

Форма для загрузки изображений с кнопкой выбора файла:
 <form action="/thumbnail.php" method="post" enctype="multipart/form-data" target="iframe">
     <input type="file" name="file" id="file" />
 </form>

При выборке картинки срабатывает событие submit и грузит её в скрытый фрейм на /thumbnail.php.
thumbnail.php преобразовывает изображение, сохраняет на ФС, записывает кое-что в таблицу (см далее), после чего отдает путь к превью, JS из родительского окна браузера рисует блок изображения с URL этого превью.
Рисуется в основной форме поста hidden поле вида

<input type="hidden" name="thumbnail[]" value="123">

где 123 - ID картинки, которую мы положили уже на сервер и записали в таблицу вида
id | id_post | file_name | file_date
получается что-то вроде записи
123 | null | file.jpeg | 20-02-2020
при посте самой формы мы делаем update, пробегаемся по массиву thumbnail из POST и у каждой записи обновляем id_post на тот, что получили в результате сохранения поста:
update images set id_post = 1 where id = 123

крон ходит раз в 15 минут и убивает все картинки, где id_post is null и file_date < now()-1 час

Comments

[Модератор]

Developer, Северное Сияние, или вы сами прекратите, или вам помогут.

Answer 3

[Nikidze]

Вариант Алексей больше подходит для предпросмотра изображений. Я бы рекомендовал делать так:
1. Пользователь выбирает изображение, вы делаете его предпросмотр и отправляете на сервер через ajax
2. Сервер отдает вам id или название файла за груженой картинки
3. После того как пользователь создает пост (или что там вам надо) вы отправляете вместе с прочими данными id картинки