convert to base64 and send image using ajax in Javascript

Question

I need to send selected image to the server, here is already I have tried

here is HTML part

                    <div class="row">
                        <input type="file" name="filUpload" id="filUpload" onchange="showimagepreview(this)">
                        <br />
                        <img id="imgprvw" alt="uploaded image preview" class="img-thumbnail" />
                    </div>

I need to get encoded image into javascript variable,But I have no idea

Answer 1

for uploading image on to server you need to send image data via AJAX to server side.

for reference you can see this link :

http://www.sanwebe.com/2012/05/ajax-image-upload-and-resize-with-jquery-and-php

http://phppot.com/php/php-ajax-image-upload/

Answer 2

you can try using jquery's base64 plugin. Jquery.Base64 plugin

and do it like this:

function showimagepreview(c) {
    var file = c;
    if(file.files.length)
    {
        var reader = new FileReader();
        reader.onload = function(e)
        {
            var b = $.base64.encode(e.target.result);

            $("#imgprvw").attr("src", "data:image/png;base64," + b);
        };
        reader.readAsBinaryString(file.files[0]);
    }
}