Q:

File upload with Spring using javascript and HTML without submit button

I have a bootstrap wizard where I ask to select some file into step and at the and of the wizard I have to use them.
SO I put a form around wizard, storing all the step information inside it.
But with the file how do I have to entail? I thought to store file into directory (because I have to store them anyway) and save the path into form object. Is it right?
If this approach is right I would like to use file upload without submit button but using wizard next button. At the moment I hide the next button and show it when a file is selected, but how can I pass file to javascript and to controller?I can use ajax to call controller but how can I associate form to next button?
Because I have to use javascript to associate the upload envent to next button.
This is my file form(I have an advice because form can't use into this tag)
<div class="tab-pane" id="step3">
<p>Select datatable Excel file</p>
<form class="input-group " method="post"
    enctype="multipart/form-data"
    th:action="@{/datatable}" action="">
    <div class="input-group">
        <span class="input-group-btn"> <span
            class="btn btn-primary btn-file"> Browse&hellip;
                <input  type="file" name="file"
                accept=".xls, .xlsx, .xlsm" />
        </span>
        </span> <input id=datatableName" type="text" class="form-control" readonly="readonly">
    </div>
</form>

In javascript I have 
onNext: function(tab, navigation, index) {

where I have to put ajax call, but how can  retrieve file ?

A:

First of all you need to give id of you file control (assuning file control has file as id).
then try this script....
jQuery('#datatableName').click(function(e) {
    var fileControl = document.getElementById('file');
    if(fileControl.files.length == 0){ 
        alert('Send Message: Please Select File'); 
        return false; 
    }
    var formData = new FormData();
    formData.append('file',fileControl.files[0]);
    jQuery.ajax({
        url : 'you_server_side_endpoint',
        type: 'POST',
        contentType: false,
        processData: false,
        data:formData,
        success: function(data,status,xhr){
            alert('File has been Uploded');
        },
        error: function(xhr,status,e){
            alert('Error');
        }
    });
});

but additinally, you need to write script for move file in you site directory ( in php move_uploaded_file(); function will help you ).

