Topic: Upload image

I want to upload images to database, but I dont know how to receive this file.

<input type="text" id="txtName">
<input type="file" id="image" onchange="sendImage()">

function sendImage()
    var name = $('#txtName').val();
    var image = $('#image').val(); //is this the way to send the image?
    xajax_SaveImage(name, image);

//Ok, with string I dont have problems, but how receive I the image?

function SaveImage($name, $image)
   //How here I convert the image to binary for to save in Mysql

Re: Upload image


Images and the like are usually handled with the file tag in html. I am currently working on a small project that involves images and I have not come up with a way to get thee image file directly using xajax. If I come up with a solution, I'll post it...

Thinking about maybe drag and drop...


If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.

Re: Upload image

I was trying to upload the image directly in the server, in a field type BLOB(mysql), but I changed the way, now I am saving just
the path, and the image in a folder, and it works very good.


Re: Upload image

I have doing a lot of looking since yesterday and now have a way to upload files using xajax.
The key is the FileReader object. I am surprised there has not been more about this...

<!doctype html>
    This is a sample of obtaining the file contents and it's name from
    file tag in html. These can then be used to send the file to xajax.
<input type="file" class="fileuploader" style="display: none; accept="image/*"">  
<button class="fileuploader-btn">Upload</button><br>
<div id="imgdisplay"></div>
<div id="imgfilename"></div>
<button id="sendbtn" onclick="shipTheFile()" style="display: none;">Send the File</button>
var filecontent;    //The base64 of the file's contents
var fname;          //The name of the uploaded file    
//This is how you capture the file using the Fileeader object

    // Click button to activate hidden file input
    $('.fileuploader-btn').on('click', function(){
        $('.fileuploader').click(); //Causes the file dialog to show

    // Input change function

        // Create new FileReader
        var reader = new FileReader();
        // Onload Function to run after file loaded fully
        reader.onload = function(file){
            // Base64 Encoded Image Loaded
            fileContent =;
            fname =;
            $('#imgfilename').html('File Name: '+fname);

            // Output on Page
            $('#imgdisplay').html('<img src="' + fileContent + '">');
        reader.onabort = function(){}; //Do nothing when user cancels the load

        // Get the selected Item from Dialog
        var theFile = this.files[0];
        fname =;



function clearTheScreen()

//This is how you get the file uploaded to the server
function shipTheFile()
    alert('Sending the file to Xajax on the server...');
    var args = {'fName':fname, 'fContent':filecontent};
    var stringy = JSON.stringify(args);


When the items reach the server the file content must be decoded from base 64 using something like this:

    //Base64 conversion lifted from
    function base64_to_jpeg($base64_string) 
        // split the string on commas
        // $data[ 0 ] == "data:image/png;base64"
        // $data[ 1 ] == <actual base64 string>
        $data = explode( ',', $base64_string );
        $image = base64_decode( $data[ 1 ] );
        return $image;
     //Receive the file info from the browser and
     //save it as a file
     function saveTheImage($data)
        $resp= new xajaxResponse();
        $args = json_decode($data);
        $fName = 'assets/images/'.$args->fName;
        $image = base64_to_jpeg($args->fileContents);
            $resp->alert('Failed to save the image...');
            $resp->alert('Image saved...');
        return $resp;

This may need some tweeking but so far it is working in my current project.


If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.