Предварительный пост с изображением перед подтверждением отправки на сервер

У меня есть страница с формой, которая содержит много полей и изображение:

<form method="POST" action="http://project.dev/model/useradd" accept-charset="UTF-8" autocomplete="off" id="AddModel" enctype="multipart/form-data">
<input name="_token" type="hidden" value="yeq4iLVIyXiYyMbORaY5fA6zxIYDFWNJTqNVYiP9">
<div class="form-group">
<label for="material">Material</label>
<input type="text" class="form-control" name="material" maxlength="30" style="width:30ch">
</div>
<div class="form-group">
<label for="color">Color</label>
<input type="text" class="form-control" name="color" maxlength="10" style="width:20ch">
</div>
<div class="form-group">
<label for="description">Description</label>
<input type="text" class="form-control" name="description" maxlength="500">
</div>
<div class="form-group">
<label for="image">Picture</label>
<input id="modelpic" name="image" type="file">
<br/>
</div>
<div id="imagePreview" style="display: none;"></div> /** here I show the preview of the image through javascript */
<div class="form-group">
<input id="AddBtn" class="btn btn-default" type="submit" value="Submit">
</form>

Вот javascript, который показывает предварительный просмотр изображения в форме после выбора:

    $(document).ready(function() {
$('#modelpic').on("change", function () {

//shows image preview in DOM
var files = !!this.files ? this.files : [];

if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(this.files[0]); // read the local file

reader.onloadend = function(){ // show image in div
$('#imagePreview').show().html('<img id="theImage" src="' +this.result+ '" class="img-fluid" alt="Your Image" />');

}
}
})
});

Что мне нужно сделать, так это показать предварительный просмотр поста в том виде, в каком он появится до подтверждения отправки.
Как я могу сделать это с помощью jquery? Я думаю, я также должен изменить часть действия кода формы action="http://project.dev/model/useradd" в HTML что-то вроде себя или что-то? Это правильно?
Как получить отправленные данные формы вдоль картинки после нажатия кнопки отправки в jquery и использовать ее для вывода HTML в предварительный просмотр div?

— Я также подумал о том, чтобы отправить данные на сервер, временно сохранить изображение в открытом доступе, а затем загрузить его в предварительном просмотре. Проблема в том, что если я использую ajax для перехвата отправки, изображение не будет отправлено. Я думаю, что это проблема спецификации данных. Мой код JS-скрипта выглядит так:

jQuery(function ($) {
$(document).ready(function () {

$("body").on("submit", "#AddModel", function (e) {

var form = $(this);

$.ajax({
url: form.prop('action'),
type: 'post',
dataType: 'json',
data: $(this).serialize(),
success: function (data) {

console.log(data);},
error: function (textStatus) {

{var json = JSON.parse(textStatus.responseText);console.log (json);}

}
});
e.preventDefault();
});
});
});

Я думаю, что это неправильно, вероятно, в типе данных или что-то.