jqueryasp.net-mvc-4jquery-file-uploadjquery-fileupload-rails

jquery file upload in mvc while clicking on button


Here i am using jQuery-File-Upload to upload files. it is working fine. but here file is uploading when we select file, i need to upload file after clicking on submit button. Please help me how to solve this issue. i am using the following code.

   $('#fileupload').fileupload({


        dataType: 'json',
        url: '/VendorReport/UploadFiles',
        autoUpload: true,
        type: boolen,
        Default:true,
        success: function (msg) {

            alert(msg);

        }
    });


<input id="fileupload" type="file" name="files[]">
<input type="submit" id="btnup" value="Upload" />

Solution

  • You can stop auto-upload behavior by setting autoUpload: false

    $('#fileupload').fileupload({
        dataType: 'json',
        url: '/VendorReport/UploadFiles',
        autoUpload: false,
        type: boolen,
        Default:true,
        success: function (msg) {
            alert(msg);
    
        }
    });
    

    EDIT

    To upload file on clicking of button:

    HTML

    <input id="fileupload" type="file" name="files[]">
    <input type="submit" id="btnup" value="Upload" />
    

    jQuery

    $(document).ready(function(){
        $("#btnup").click(function(){
             $('#fileupload').fileupload({
                dataType: 'json',
                url: '/VendorReport/UploadFiles',
                autoUpload: false,
                type: boolen,
                Default:true,
                success: function (msg) {
                    alert(msg);
                }
            });
        });
    });
    

    EDIT

    Or refer its documentation to follow official way--> How to start uploads with a button click

    $('#fileupload').fileupload({
        dataType: 'json',
        url: '/VendorReport/UploadFiles',
        autoUpload: false,
        type: boolen,
        Default:true,
        success: function (msg) {
            alert(msg);
        }
        add: function (e, data) {
            data.context = $('<button/>').text('Click to Upload')
                .appendTo(document.body)
                .click(function () {
                    data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                    data.submit();
            });
        }
    });