file upload not working from Bootstrap modal
<p>I am trying to upload a file using modal. its working on file select and not on button click. </p>

<p>Below code is for button which calls my modal:</p>

<pre><code> &lt;button type="button" class="btn btn-primary btn-xs"
         id="browseAndLoad" name="browseAndLoad"&gt;
     File Upload
 &lt;/button&gt;
</code></pre>

<p>Below code is my modal dialog:</p>

<pre><code>&lt;div class="modal fade" id="completeBrowse" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
        &lt;!-- Modal content--&gt;
        &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
                &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                &lt;h4&gt;&lt;span class="glyphicon glyphicon-lock"&gt;&lt;/span&gt; Upload File&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body" id="completeBrowseBody"&gt;
                Choose and Upload
                &lt;input type="file" name="datafile" class="form-control" /&gt;&lt;br/&gt;
                &lt;div id="upload" style="display:none;"&gt;Uploading..&lt;/div&gt;
                &lt;input type="button" class="btn btn-default btn-xs"
                       id="uploadingFileButton" name="uploadingFileButton"
                       value="Upload"/&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
                &lt;em&gt; Click on &lt;strong&gt;Choose File/ Browse&lt;/strong&gt; to select and upload a file &lt;/em&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Below is file upload part which i am trying to implement:</p>

<pre><code>$('input[name="uploadingFileButton"]').ajaxfileupload({
            'params': '${formRoot.Number}:${headerModel.User}',
            'action': path,
    //      'orderID', '${formRoot.Number}',
            'onComplete': function(response) {
                $('#upload').hide();
                if(response.status)
                    alert("File SAVED!!");
            },
            'onStart': function() {
                $('#upload').show();
            }
        });
</code></pre>

<p>If i use the same code as below it works fine. But the problem is the moment I browse and select the file it uploads...
I am trying to browse and select the file when click "Choose File/ Browse" button and on upload button click file should be uploaded...</p>

<pre><code>$('input[type="file"]').ajaxfileupload({
           'params': '${formRoot.Number}:${headerModel.User}',
            'action': path,
    //      'orderID', '${formRoot.Number}',
            'onComplete': function(response) {
                $('#upload').hide();
                if(response.status)
                    alert("File SAVED!!");
            },
            'onStart': function() {
                $('#upload').show();
            }
        });
</code></pre>