bootstrap file upload with image preview

Question

I am attempting to do file uploads with bootstrap but I don't know what I am doing so can someone tell me how to do this and how to get an image preview for the upload as the file upload is intended to upload images onto my website. Here is what I have so far in HTML.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<form class="form-horizontal" enctype="multipart/form-data">
  <div class="form-group">
    <label class="control-label col-sm-2">Pic Name:</label>
    <div class="col-xs-4">
      <input type="text" class="form-control" name="profilepicname" />
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2">Upload Pic:</label>
    <div class="col-xs-3">
      <input type="file" name="profilepic" />
    </div>
  </div>
</form>

Also there is a big space between naming the picture and the file upload section on the webpage. How, do I get rid of this?

Solution 1

An example of an image upload form with preview, built with Bootstrap and no additional CSS, it uses jQuery AJAX to query a PHP script which is responsible for the upload:

• index.html
• upload-image.js (ajax)
• upload-image.php

Solution 2

Jasny Bootstrap, a third-party Bootstrap component library, allows you to come close.

See documentation.

Edit your code according to this:

<div class="fileinput fileinput-new" data-provides="fileinput">
  <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
  <div>
    <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
    <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
  </div>
</div>

Comments

[jcwalker2006]

Does this require additional jquery because it didn't work for me?