优化jQuery文件检查

Question

背景

我们正在为南非的一些诊所创建一个信息管理系统。该系统的一部分是每个诊所的照片库。每个诊所的照片数量不限。

问题

由于我们需要上传大约400个诊所的数据，我们需要一个简单的系统，允许“一次性”上传。我写了一个jQuery函数 - 当上传输入被更改时 - 基本上检查文件的名称，并根据该名称将其分成几个部分（根据诊所名称）

问题是，当我添加大量文件时，处理所需的时间是永远的。处理600个文件大约需要5分钟。而这只是将它们划分为各个部分。

守则

$("#UploadFiles").on('change',function() {
    $("#UploadAddForm").fadeOut(200,function() {
        $(".info").fadeIn(200);
    });
    for (var i=0; i < this.files.length; i++) {
        var file = this.files[i];
        file.ext = file.name.substr(file.name.lastIndexOf('.')+1).toLowerCase();
        file.icon = '../img/icon/file_extension_' + file.ext + '.png';
        file.category = fileObject[file.ext] ? fileObject[file.ext] : 'Unknown';
        file.owner = file.name.substr(0,file.name.indexOf('_'));
        $.ajax({
            url: 'checkClinic/'+file.owner,
            type: 'post',
            dataType: 'json',
            async: false,
            success: function(data) {
                if(!data) {
                    file.owner = 'Unknown';
                }
            }
        });
        file.div = file.owner.replace(/ /g,"_");
        $("#UploadAddForm").append(
            $('<input type="hidden">').attr({
                'name' : 'data[FileData][' + i + '][name]',
                'id' : 'FileData'+i+'Name',
                'value' : file.name
            })
        ).append(
            $('<input type="hidden">').attr({
                'name' : 'data[FileData][' + i + '][owner]',
                'id' : 'FileData'+i+'Owner',
                'class' : 'file_owner',
                'value' : file.owner
            })
        );
        if($('#' + file.div).length > 0 || file.owner == 'Unknown') {
            //do nothing
        } else {
            $('.info').append(
                $('<div>').attr({
                    'id' : file.div,
                    'class' : 'file_holder'
                }).html('<h3>' + file.owner + '</h3>')
            );
        }
        if(file.category != 'Unknown' && file.owner != 'Unknown') {
            $holder = $('#' + file.div);
        } else {
            $holder = $('.unknown-files');
            $('#FileData'+i+'Owner').val('unknown');
        }
        $($holder).append(
            $('<div>').attr({
                class: 'fake_file',
                'input': '#FileData'+i+'Owner',
                id: 'File'+i+'Selector'
            }).html('<img src="' + file.icon + '">&nbsp;' + file.name).draggable({
                opacity: 0.7,
                revert: "invalid",
                stack: '.file_holder'
            })
        ).droppable({
            accept: ".fake_file",
            drop: function(event,ui) {
                $(this).append(ui.draggable);
                $(ui.draggable).animate({
                    left: 0,
                    top: 0
                });
                $(ui.draggable.attr('input')).val($(this).attr('id').replace(/_/g," "));
            }
        });

        if(file.category == 'image') {
            $("#UploadAddForm").append(
                $('<input type="hidden">').attr({
                    'name' : 'data[FileData][' + i + '][cover]',
                    'id' : 'FileData'+i+'Cover',
                    'value' : 'No'
                })
            );
            $('#File'+i+'Selector').append(
                $('<input>').attr({
                    type: 'radio',
                    name: file.div,
                    id: 'File'+i,
                    'cover': '#FileData'+i+'Cover',
                    class: 'cover-selector',
                }).on(
                'click',function(e) {
                    $name = $(this).attr('name');
                    $.each($('input[name="' + $name + '"]'),function(i,v) {
                        $($(this).attr('cover')).val('No');
                    });
                    $($(this).attr('cover')).val('Yes');
                })
            ).append(
                $('<label>').attr({
                    'for': 'File'+i
                }).html('Cover')
            );
        }
    }
    $('.info').append(
        $('<div>').attr({
            'class' : 'submit'
        }).append(
            $('<input>').attr({
                'type' : 'submit',
                'value' : 'Upload',
                'class' : 'submit-upload'
            })
        )
    );
    $('.submit-upload').on('click',function() {
        $('#UploadAddForm').submit();
    });
});

问题

有什么办法可以优化这段代码吗？它的工作原理和确实需要做的事情，但它只需要很长时间就可以完成。

其他信息

我意识到我可能不是100％清楚。所以我要添加一些图片。

这是我第一次加载页面时的样子：

然后，我选择文件：

如果我在上面的步骤中选择了很多文件，则在显示此页面之前需要永久处理：

如上所述，它运行正常，只需要永远运行，所以我想知道是否有任何方法可以优化它。

Answer 1

也许瓶颈就是上传。你有多少带宽和文件有多大？

您应该尝试使用微小（~1KB）但数量众多（数百）的文件完全相同的代码。 如果这很快，那么问题就在于你拥有的文件大小和带宽。

我想到的第二件事就是这个。在代码的开头，您有：

$("#UploadAddForm").fadeOut(200,function() {
    $(".info").fadeIn(200);
});

现在，这是针对每个文件执行的吗？如果是这样，可能是更改队列为每个文件触发此片段。你说600个文件需要5分钟，即每个文件500毫秒。淡入/淡出每个文件需要200 + 200 = 400毫秒。大约我们在那里。

作为测试，我将淡入/淡出淡化为1毫秒（紧接着瞬间）并测试这是否是问题。