无法上传多张图片

Question

我正在使用以下javascript代码上传和压缩图片，但它仅适用于一张图片。

如何压缩然后上传多张图片？

需要进行哪些修改？

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');
});

我想在上传到服务器之前压缩多个图像。我坚持下去，请帮助。