How to make Ajax call to php script without posting form

I am trying to incorporate a file upload progress bar into an existing php page. The form on the existing php page posts to itself and I run a Select Case on the buttons as there are several 'action' buttons on the page.

The progress bar solution that I can get working (I have spent ages trying to get any progress bar working) calls the php upload script in its own form action.

How can I incorporate the file upload progress bar without putting the php upload script as the form action?

<script type="text/javascript">
$(document).ready(function() { 
     $('#uploadForm').submit(function(e) {  
        if($('#userImage').val()) {
            e.preventDefault();
        $('#loader-icon').show();
        $(this).ajaxSubmit({ 
            target:   '#targetLayer', 
            beforeSubmit: function() {
              $("#progress-bar").width('0%');
            },
            uploadProgress: function (event, position, total, percentComplete){ 
                $("#progress-bar").width(percentComplete + '%');
                $("#progress-bar").html('<div id="progress-status">' + percentComplete +' %</div>')
            },
            success:function (){
                $('#loader-icon').hide();
            },
            resetForm: true 
        }); 
        return false; 
    }
});


}); 
    </script> 





<form id="uploadForm" action="upload.php" method="post">
    <div>
         <input name="userImage" id="userImage" type="file" class="demoInputBox" />
       ' </div>
       ' <div><input type="submit" id="btnSubmit" value="Submit"         class="btnSubmit" /></div>
        '<div id="progress-div"><div id="progress-bar"></div></div>
       ' <div id="targetLayer"></div>
        '</form>

(Bit of a newbie) Thanks for any assistance, Nick