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

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

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

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

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

Худший ответ:
Я так делал. 

Рисуется скрытый фрейм: 
<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 час