Как заполнить несколько входных файлов при редактировании HTML-формы PHP

Question

Я борюсь с пользовательской формой редактирования / обновления, имеющей несколько полей ввода изображения.

Моя форма и скрипт выглядят как

 $stm_img = "Select * from post_image where post_image.post_id='$pid' ";

 $stmimg_exe = mysqli_query($con, $stm_img);

 $img_array =  array();

  while($rowimg = mysqli_fetch_array($stmimg_exe))
  {
         $img_array = $rowimg;
  } 


<form class="checkout-form" id="" action="" method="POST" enctype="multipart/form-data">

 <input type="text" value="<?php echo $datarow['title']; ?>" name="ptitle" placeholder="Title">

 <input id="file" type="file" name="images[]" accept="image/*" class="btn btn-primary" multiple >

 <div id="preview" name="" style="margin-top: 20px;"></div>

  <button class="btn btn-success pull-right" name="update" value="update">UPDATE</button>

</form>

Вот JavaScript для предварительного просмотра

<script type="text/javascript">

 function previewImages() {

  var $preview = $('#preview').empty();
  if (this.files) $.each(this.files, readAndPreview);

  function readAndPreview(i, file) {

    if (!/\.(jpe?g|png|gif)$/i.test(file.name)){
      return alert(file.name +" is not an image");
    } // else...

    var reader = new FileReader();

    $(reader).on("load", function() {
      $preview.append($("<img/>", {src:this.result, height:100}));
    });

    reader.readAsDataURL(file);
  }

}

$('#file').on("change", previewImages);
 </script>

Добавление / вставка нескольких изображений / файлов работает нормально, я не знаю, как получить форму редактирования с несколькими файлами готово. Просто интересно, как я могу заполнить несколько файлов ввода и предварительного просмотра Div? Что мне нужно сделать, чтобы достичь желаемого результата. Заранее спасибо!