Bootstrap File Input Demo

Thankful to Krajee!
to get more out of us.

Synchronous Without Preview: This scenario extends scenario 10 for synchronous AJAX based uploads without preview. The events to use are a bit different here (e.g. filebatchuploadsuccess instead of fileuploaded). You would set showPreview to false to disable preview. The progress bar for uploads will by default be shown automatically. To allow trapping and display errors when not having a preview pane, set a custom error container via elErrorContainer. Note that it is recommended to set a display:none style for the error container to have a consistent layout display even when no validation errors exist.


Code

<div class="file-loading">
    <input id="input-710" name="kartik-input-710[]" type="file" multiple>
</div>
<div id="kv-error-2" style="margin-top:10px;display:none"></div>
<div id="kv-success-2" class="alert alert-success" style="margin-top:10px;display:none"></div>
<script>
$(document).on("ready", function() {
    $("#input-710").fileinput({
        uploadUrl: "/file-upload-batch/1",
        uploadAsync: false,
        showPreview: false,
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        maxFileCount: 5,
        elErrorContainer: '#kv-error-2'
    }).on('filebatchpreupload', function(event, data, id, index) {
        $('#kv-success-2').html('<h4>Upload Status</h4><ul></ul>').hide();
    }).on('filebatchuploadsuccess', function(event, data) {
        var out = '';
        $.each(data.files, function(key, file) {
            var fname = file.name;
            out = out + '<li>' + 'Uploaded file # ' + (key + 1) + ' - '  +  fname + ' successfully.' + '</li>';
        });
        $('#kv-success-2 ul').append(out);
        $('#kv-success-2').fadeIn('slow');
    });
});
</script>

Note

You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.