Retreive and pass the path of uploaded image for processing

Retreive and pass the path of uploaded image for processing

Sorry if this is not the right forum. Am using jquery form plugin with cakephp. Below is what am trying to achieve.

I have a form with several elements as well as a file upload element. I want to triger the onchange event of the file upload element and pass the form values including the image to an action defined in my cakephp class. The action will then save the image and return the image path to my jquery for display using ajax

  1. <?php echo $form->create('Owner', array('enctype' => 'multipart/form-data','id'=>'owner_file') );?>
        <fieldset>
             <legend><?php __('Edit Owner');?></legend>
        <?php
            echo $form->input('id');
            echo $form->input('owners_name');
            echo $form->input('address');
            echo $form->input('phone');
            echo $form->input('email');
            echo $form->input('blood_group');
            echo $form->input('facial_marks');
            echo $form->input('sex_id');
            echo $form->input('dob');
            echo $form->input('height');
            echo $form->input('glasses');
            echo $form->input('picture', array('between'=>'<br />','type'=>'file','id'=>'pix_box'));
                    
                    echo $html->image('info.png', array('id'=>'owner_pix','width'=>100));
                   


        ?>
        </fieldset>
    <?php echo $form->end('Submit');?>























  1. $(document).ready(function() {
        var options = {
            target:        '#output2',   // target element(s) to be updated with server response
            //beforeSubmit:  showRequest,  // pre-submit callback
            success:       showResponse,  // post-submit callback
            semantic: true

            // other available options:
            //url:       url         // override for form's 'action' attribute
            //type:      type        // 'get' or 'post', override for form's 'method' attribute
            //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)
            //clearForm: true        // clear all form fields after successful submit
            //resetForm: true        // reset the form after successful submit

            // $.ajax options can be used here too, for example:
            //timeout:   3000
        };

        // bind to the form's submit event
        $('#pix_box').change(function() {
            // inside event callbacks 'this' is the DOM element so we first
            // wrap it in a jQuery object and then invoke ajaxSubmit
            $('#owner_file').ajaxSubmit(options);
              fieldName = $(this).attr('id');
             fieldValue = $(this).val();
              $.post('/evehicle/owners/show_pix', {
                                            field: fieldName,
                                            value: fieldValue
                                            });
                            
                  
            // !!! Important !!!
            // always return false to prevent standard browser submit and page navigation
            return false;
        });
    });