Download image preview boot file

Question

I am trying to upload files using bootstrap, but I don’t know what I am doing, can someone tell me how to do this and how to get a preview of the image to upload, since the file upload is for uploading images to my site. Here is what I still have in html.

<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"></input>
        </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"></input>
        </div>
    </div>
</form>

There is also a large space between the image name and the file upload section of the web page. how can i get rid of this?

Answer 1

, Bootstrap CSS, jQuery AJAX PHP script, :

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

Answer 2

Jasny Bootstrap, Bootstrap, .

. .

:

<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>