使用 Javascript 更新引导容器

Question

I have a Bootstrap container:

 <div class="container">
      <div class="jumbotron">
        <div class="row">
          <div class="col-lg-8">
            <form action="upload.php" method="POST" enctype="multipart/form-data">
                <h3><strong>Step 1: Choose an image from your PC</strong></h3><hr>
                  <input type="file" name="file" id="inputFile"><br><br> 
                  <button type="submit" name="btn_submit" value="upload" class="btn btn-secondary">Select image</button>
            </form>
          </div>
       </div>
     </div>
 </div>

Once the upload.php processes the upload successfull I would like to update the existing row container and add a new column container displaying the image on the right hand side. The following HTML works I can change the php inside the HTML if theres an easier method:

<div class="col-lg-4">
    <?php echo display_image($_SESSION['upload-file-destination']); ?><br>
    <p><strong>File size: <?php echo $_SESSION['file-size'] / 1024;?> KB</strong></p>
</div>

How can I achieve this using Javascript or Jquery?

Answer 1

First create a xmlhttprequest or fetch call to your uplad.php file. From your upload.php file return the file destination for example ./uploads/images/myFile.png . Now you can add a div, where your image should be placed and add it with javascript.

html:

<div id="img"></div>

javascript:

let imgDiv = document.getElementByid("img");
let img = document.createElement("img");
img.setAttribute("src", "your_response_path"); // as mentioned above
imgDiv.appendChild(img);

Answer 2

Here is the solution to my problem:

<script type="text/javascript">
    $(document).ready(function() {
        $(".row").append('"<div class=\"col-lg-3\" id=\"img-upload\"><?php echo display_image($_SESSION['upload-file-destination']); ?></div>"');
        $("#img-upload").append('<br><p><strong>File size: <?php echo $_SESSION['file-size'] / 1024;?> KB</strong></p>');
    });
</script>