Geek asks and answers

How to upload image using Jasny bootstrap imagepreview?

I am trying to use Jasny Bootstrap. This is a good job!

I can’t find a solution to upload a downloadable image to http://jasny.github.com/bootstrap/javascript.html#fileupload

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

+5
source share
4 answers

I asked this question directly to ARNOLD DANIELS, who is the owner of Jasny Bootstrap.

Here is his answer:

, AJAX. . AJAX http://api.jquery.com/jQuery.post/ .

AJAX , http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html

!

+8

css js:

Yii Framework:

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


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

script:

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


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

HTML :

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

Google , , ( )

$(document).ready(function(){
$('.fileinput-preview').bind('DOMNodeInserted', function(event) {
    var imgdata = ($('.fileinput-preview img').attr('src'));
    $.post( "upload.php", { imgdata: imgdata})
    .done(function( data ) {
    alert( "Data Loaded: " + data );
  });
   })
})

This piece of code detects when the file preview was changed. Then it finds the base64 data from the image tag and uses jquery to send it to the upload.php file.

Download.php just takes the base64 image data and saves it as an image

$imgdata = $_POST['imgdata'];
$ifp = fopen("newimage.jpg", "wb"); 
$data = explode(',', $imgdata);
fwrite($ifp, base64_decode($data[1])); 
fclose($ifp);
+1
source

Uploading to jasny is more than previewing or managing downloads on the client side, instead of ajax, maybe you need to use a different method or plugin because jasny upload will send the preview path using a binary image display

0
source

More articles:


All Articles