Experimenting with File-Upload

Blueimp

by Ea Bangalore

HTML

<script src="https://rawgithub.com/blueimp/jQuery-File-Upload/master/js/jquery.iframe-transport.js"></script>
<script src="https://rawgithub.com/blueimp/jQuery-File-Upload/master/js/jquery.fileupload.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/4.1.6/css/foundation.css">
<input id="fileupload" type="file" name="files[]" multiple>
<div class="progress">
    <div class="meter" style="width: 0%;"></div>
</div>
<div class="data"></div>

CSS

.meter {
    color:#000;
    margin-top: 20px;
}

JavaScript

$(function () {
    $('#fileupload').fileupload({
        url: '/echo/json/',
        maxChunkSize: 1048576,
        maxRetries: 10,
        dataType: 'json',
        multipart: false,
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10),
                meter = $('.progress .meter'),
                percent = progress + '%';
           console.log('percentage....',percent);
            meter.css('width', percent).text(percent);
        },
        progress: function(e, data){
             var progress = parseInt(data.loaded / data.total * 100, 10),
             percent = progress + '%';
             $('.meter').css('width', percent).text(percent);
        },
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo('.data');
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        },
        fail: function (e, data) {
            data.context.text('Upload failed.');
            $('.progress').addClass('alert');
            console.warn('Error: ', data);

        }
    }).on('fileuploadchunksend', function (e, data) {
          //if (data.uploadedBytes === 3145728 ) return false;
    }).on('fileuploadchunkdone', function (e, data) {
      
    });
});