Twitter Bootstrap Image Upload with Preview and Progress Bar

image file-upload twitter-bootstrap preview
azeem picture azeem · Dec 2, 2012 · Viewed 79k times · Source

How can i use Twitter Bootstrap to upload a single image with preview and progress bar. As currently, Until I save the image, I can not see what any preview or progress bar to upload the image.

Answer

Paul Oliver picture Paul Oliver · Dec 2, 2012

Jasny's fork of Bootstrap allows you to do come close. See documentation.

The code:

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

It doesn't seem to have a progress bar, unfortunately.

Related questions

Check image width and height before upload with Javascript

I have a JPS with a form in which a user can put an image: <div class="photo"> <div>Photo (max 240x240 and 100 kb):</div> <input type="file" name="photo" id="photoInput" onchange="…

Read More
Multiple Image Upload PHP form with one input

I've been trying to make this work for quite some time now. But I can't seem to make it work. I wanted to have a multiple image upload form with only using one input. this is my upload.php <?…

Read More
HTML: How to limit file upload to be only images?

With HTML, how do I limit what kind of filetypes can be uploaded? To easy the user experience, I want to limit file uploads to be only images (jpeg, gif, png). <form method="post" action="..." enctype="multipart/form-data"> &…

Read More