Show preview image, upload on submit form

I'm working with the jquery plugin transloadit to upload images to my amazon s3 bucket.
What I have for now is just a simple resize and upload to my images folder on amazon.

Now I would like to use the uploader in a form with other input fields. If you select a picture when you click on the image upload button you get a preview of the image but the image isn't already uploaded. When you click on "Submit" of the whole form the image gets uploaded.

Can somebody help me with this or get my on my way?

This is my code for uploading an image to amazon:

<form id="UploadForm" action="/index/upload" enctype="multipart/form-data" method="POST">
<input type="file" name="my_file" multiple="multiple" />

$(function() {
    // We reference our html form here
    $('form#UploadForm').transloadit({
        wait: true,
        triggerUploadOnFileSelection: true,
        params: {
            auth: { key: "key" },
            template_id: "templateid"
        }
    });
});


public function uploadAction()
{
    $this->_helper->layout->disableLayout();
    $this->_helper->viewRenderer->setNoRender();

    $transloaditData = $_POST['transloadit'];
    if (ini_get('magic_quotes_gpc') === '1') {
        $transloaditData = stripslashes($transloaditData);
    }
    $transloaditData = json_decode($transloaditData, true);

    foreach ($transloaditData['uploads'] as $upload) {
        // do something with the uploaded file here
    }

    foreach ($transloaditData['results'] as $encodingResult) {
        // do something with the encoding result here here,
        // like saving its URL to the database
    }
}

Try filereader

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

http://jsfiddle.net/LvsYc/