How to upload image with Jasny's bootstrap imagepreview?

Question

I'm trying to use Jasny's Bootstrap. This is nice work!

I coudn't find solution for bootstrap upload image on page http://jasny.github.com/bootstrap/javascript.html#fileupload

With bootstrap-fileupload.js, how can I upload image using Ajax?

Answer 1

I asked this question to directly ARNOLD DANIELS who is owner of Jasny's Bootstrap.

Here is his answer:

The whole point of the image preview is that the picture is show right away, without the need to upload it to the server using AJAX. So it stays just a regular form. You can post a form using AJAX http://api.jquery.com/jQuery.post/ if needed.

If you do want to upload the image using AJAX and don't want to use a form, checkout http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html

I used this sample with removing database releated lines and worked perfectly for me !

Answer 2

First you need to register the css and js files:

If you are using Yii Framework:

$cs = Yii::app()->clientScript;
$cs->registerCSSFile("/css/fileupload.css");
$cs->registerScriptFile('/js/fileupload.js', CClientScript::POS_END);

Or

<link rel="stylesheet" type="text/css" href="/css/fileupload.css">
<script type="text/javascript" src="/js/fileupload.js"></script>

Then register the following script:

$cs->registerScript("imageUpload", "$('.fileupload').fileupload({uploadtype: 'image'});", CClientScript::POS_END) ;

Or

<script type="text/javascript">
$('.fileupload').fileupload({uploadtype: 'image'});
</script>

Then add the following HTML code to your page:

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