CodeseniorSoftware Tutorials

Ajax file upload usage with https://github.com/blueimp/jQuery-File-Upload plugin as follows:

HTML Part

<div class="row">
    <div class="col-sm-6">
        <input class="file-upload" type="file"
               name="files" data-form-data="1" data-url="/file-upload.php" />
    </div>
    <div class="col-sm-6">
        <div class="progress">
            <div id="progress-bar" class="progress-bar progress-bar-success"></div>
        </div>
    </div>
</div>

JavaScript Part

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/assets/front_end/js/jquery.fileupload.js"></script>
<script src="/assets/front_end/js/jquery.iframe-transport.js"></script>
<script>
    $(function () {
        $('.file-upload').fileupload({
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress-bar').css(
                    'width',
                    progress + '%'
                );
            }
        });
    });
</script>