Not working to upload multiple images

Question

I am using following javascript code for uploading and for compressing images but it is working for only one image.

How to compress and then upload multiple images?

what modifications are required?

html:

<input  id="fileupload" type="file" name="file" multiple>

javascript:

function csrfSafeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$(function () {
'use strict';
var csrftoken = $.cookie('csrftoken');
var url = '/dashboard/{{name}}/{{name_product_type.type_product|urlencode}}/{{abc}}/';

    $('#postbtn').on('click', function () {
        var $this = $(this),
            data = $this.data();
        $this
            .off('click')
            .text('Abort')
            .on('click', function () {
                $this.remove();
                data.abort();
            });
        data.submit().always(function () {
            $this.remove();
        });
    });


$('#fileupload').fileupload({
    url: url,
    crossDomain: false,
    beforeSend: function(xhr, settings) {
    if (!csrfSafeMethod(settings.type)) {
        xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
    },
    dataType: 'json',
    uploadMultiple: true, // allow multiple upload
    autoProcessQueue: false, // prevent dropzone from uploading automatically
    maxFiles: 5,
    autoUpload: false,
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    maxFileSize: 5000000, // 5 MB
    // Enable image resizing, except for Android and Opera,
    // which actually support image resizing, but fail to
    // send Blob objects via XHR requests:
    disableImageResize: /Android(?!.*Chrome)|Opera/
    .test(window.navigator.userAgent),
    previewMaxWidth: 100,
    previewMaxHeight: 100,
    previewCrop: true
}).on('fileuploadadd', function (e, data) {
    data.context = $('<div/>').appendTo('#files');
    $.each(data.files, function (index, file) {
    var node = $('<p/>')
            .append($('<span/>').text(file.name));
    if (!index) {
        node
            .append('<br>')
           // .append($('#postbtn').clone(true).data(data));
    }
    node.appendTo(data.context);

    });
}).on('fileuploadprocessalways', function (e, data) {
    var index = data.index,
    file = data.files[index],
    node = $(data.context.children()[index]);
    if (file.preview) {
    node
        .prepend('<br>')
        .prepend(file.preview);
    }
    if (file.error) {
    node
        .append('<br>')
        .append(file.error);
    }
    if (index + 1 === data.files.length) {
    data.context.find($('#postbtn').data(data));
      //  .text('Upload')
       // .prop('disabled', !!data.files.error);
    }
}).on('fileuploadprogressall', function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('#progress .progress-bar').css(
    'width',
    progress + '%'
    );
}).on('fileuploaddone', function (e, data) {
    $.each(data.result.files, function (index, file) {
    var link = $('<a>')
        .attr('target', '_blank')
        .prop('href', file.url);
    $(data.context.children()[index])
        .wrap(link);
    });
}).on('fileuploadfail', function (e, data) {
    $.each(data.result.files, function (index, file) {
    var error = $('<span/>').text(file.error);
    $(data.context.children()[index])
        .append('<br>')
        .append(error);
    });
}).prop('disabled', !$.support.fileInput)
    .parent().addClass($.support.fileInput ? undefined : 'disabled');
});

I want to compress multiple images before uploading to the server. I am stuck with it please help.