javascript - 带有上传jquery的多进度条

Question

当我上传多个文件时，我的进度条出现错误，我找不到问题：（

我上传了多个文件，但文件是：

1. 1.jpg

2. 2.jpg

3. 3.jpg

4. 4.jpg

拖动文件时的示例错误

• 1.jpg / 完成

• 1.jpg / 完成

• 1.jpg / 完成

• 1.jpg / 完成

我的进度条有问题，我找不到问题出在哪里..

我的脚本：

(function ($) {
    var body = document.body;
    var h = $(document).height();

    var u = {
        message: 'Drag and drop file here..',
        post_url: 'upload.php'
    }
    $.fn.dragme = function (uu) {
        var t = this;

        if (uu) $.extend(u, uu);
        t.each(function () {
            $(body).append("<div class='droparea' style='height: 100%;display:none;'><span class='message'>" + u.message + "</span></div>");
            $('.message').css({
                top: '50%',
                color: '#F8F8F8',
                margin: '45%',
                position: 'relative'
            });
            $(t).on({
                dragenter: function (d) {
                    d.preventDefault();
                    d.stopPropagation();
                    if ($('.droparea').length != 1) {
                        $('.droparea').css('display', 'block');
                        $('.message').css({
                            top: '50%',
                            color: '#F8F8F8',
                            margin: '45%',
                            position: 'relative'
                        });

                    }
                    console.log('dragEnter');
                },
                //---------------------------dragover basic ----------------------------------------//

                dragover: function (d) {
                    d.preventDefault();
                    d.stopPropagation();
                    $('.droparea').css('display', 'block');
                    //console.log('dragover');
                },
                //---------------------------dragleave basic ----------------------------------------//

                dragleave: function (d) {
                    d.preventDefault();
                    d.stopPropagation();
                    $('.droparea').on('dragleave', function (d) {
                        $('.droparea').remove();
                    });
                }
            });
            //---------------------------drop add template ----------------------------------------//

            this.addEventListener('drop', function (e) {
                e.preventDefault();
                e.stopPropagation();
                $('.droparea').remove();
                var files = e.dataTransfer.files;
                var template = '<li class="file-preview" id="' + files.name + '">' +
                    '<div class="progress">' +
                    '<div class="progressbaru">cool</div>' +
                    '</div>' +
                    '</li>';


                upload(files, $(this), 0); //upload 1 files
                $('#container').append(template);
            }, false);
        });

        //-------------------------------------------------------------------------------//
        //                          function upload
        //-------------------------------------------------------------------------------//

        function upload(files, area, index) {
            var file = files[index];
            var xhr = new XMLHttpRequest();

            var template = '<li class="file-preview" id="' + files.name + '">' +
                '<div class="progress">' +
                '<div class="progressbaru"></div>' +
                '</div>' +
                '</li>';

            var formData = new FormData();
            formData.append("file", files);

            //-------------------------- load -----------------------------------------------//

            xhr.addEventListener('load', function (e) {

                if (index < files.length - 1) {
                    alert('here');
                    upload(files,area, index+1); // upload+1...
                    $('container').append(template);
                    console.log(e);
                }

            }, false);

            //---------------------------progressbar----------------------------------------//

           xhr.upload.addEventListener('progress',function(e){
                if (e.lengthComputable) {
                    var pourcent = Math.round(e.loaded / e.total * 100);
                    $('.progressbaru').css('width', pourcent + "%");
                    console.log(e);

        }
        else {
            alert("Failed to compute file upload length");
        }

            },false);
            //---------------------------! end progressbar----------------------------------------//


            xhr.open('post', u.post_url, true); //in real is post
            //xhr.setRequestHeader("Content-Type", "multipart/form-data");
            xhr.send(formData);

            xhr.onreadystatechange = function (e) {
                if (xhr.readyState == 4) {
                    console.log(['xhr upload complete', e]);

                }
            }
            //console.log(formData); 
        }
    }

})(jQuery);


$(document).ready(function () {
        $('body').dragme({

        });
    });

简单的html代码：

<body>
    <div id="list">
        <ul id="container"></ul>
    </div>
</body>

任何建议，将不胜感激。谢谢！

更新， 视频中的错误：http ://www.youtube.com/watch?v=5B8P4kNFp_g