Question

我有一个AJAX上传工作，所有准备就绪，除了百分比和进度条之外，用户无法看到任何信息。我想要做的是为每个文件创建一个div并显示每个文件的进度。我是否必须使用flash或者我可以从jquery完成所有操作因为我得到了ajax部分，所有剩下的就是为每个文件制作div并为每个文件显示进度条。如果我要上传多个文件，它会显示1个进度条，将所有文件上传到一起，我想分别为每个文件进行操作。所以基本上有一个表单可以选择多个文件并为每个文件创建一个div来显示每个文件的完成百分比。

JavaScript的：

$('#Submit').click(function(event)
{
    if ( !("FormData" in window) ) {
        $('#Wrapper').append('<div class="DMsg"><label class="DText">You Are Using An Outdated Browser, Please Upgrade To Google Chrome Or Firefox, If You Dont Most Features Will Not Work. Click Anywhere To Dismiss.</label></div>');
        $('#Wrapper').find('.DMsg').hide().slideDown('slow');
        var Close = setTimeout(function()
        {
            $('.DMsg').slideUp('slow', function()
            {
                $('.DMsg').remove();
            });
        }, 10000);
    }
    else
    {
        function Upload()
        {
            event.preventDefault();
            event.stopPropagation();

            var FInput = $('#Files').val();

            if(FInput != '')
            {
                var Data = new FormData();

                var Files = document.getElementById('Files');

                for(var I = 0; I < Files.files.length; ++I)
                {
                    var FilesName = Files.files[I].name;

                    Data.append('File[]', Files.files[I]);
                }
                var Request = new XMLHttpRequest();
                Request.upload.addEventListener('progress', function(event)
                {
                    if(event.lengthComputable)
                    {
                        Percent = event.loaded / event.total;
                        Progress = document.getElementById('Progress');
                        Loaded = Math.round(Percent * 100);

                        $('#Progress').progressbar({
                            value: Loaded
                        });

                        $('#Loaded').text(Loaded + '%');
                    }
                    else
                    {
                        $('#Progress').text('There Was An Error Getting The Percent');  
                    }
                });

                Request.upload.addEventListener('load', function(event)
                {

                });

                Request.upload.addEventListener('error', function(event)
                {
                    alert('Upload Failed.');
                });

                Request.addEventListener('readystatechange', function(event)
                {
                    if(this.readyState == 4)
                    {
                        if(this.status == 200)
                        {
                            $('#Wrapper').append('<div class="DMsg"><label class="DText">Your Files Have Finished Uploading. Click Anywhere To Dismiss.</label></div>');
                            $('#Wrapper').find('.DMsg').hide().slideDown('slow');
                            $('#Loaded').text('100%');
                            $('#Progress').progressbar({
                                value: 100
                            });
                            var Close = setTimeout(function()
                            {
                                $('.DMsg').slideUp('slow', function()
                                {
                                    $('.DMsg').remove();
                                });
                            }, 10000);
                        }
                        else
                        {
                            $('#Wrapper').append('<div class="DMsg"><label class="DText">There Was An Error In Uploading Your Files. Click Anywhere To Dismiss.</label></div>');
                            $('#Wrapper').find('.DMsg').hide().slideDown('slow');
                            var Close = setTimeout(function()
                            {
                                $('.DMsg').slideUp('slow', function()
                                {
                                    $('.DMsg').remove();
                                });
                            }, 10000);
                        }
                    }
                });

                Request.open('POST', 'Upload.php');
                Request.setRequestHeader('Cache-Control', 'no-cache');
                Progress.style.display = 'block';
                Request.send(Data); 
            }
            else
            {
                $('#Wrapper').append('<div class="DMsg"><label class="DText">Please Select A File / Files. Click Anywhere To Dismiss.</label></div>');
                $('#Wrapper').find('.DMsg').hide().slideDown('slow');
                var Close = setTimeout(function()
                {
                    $('.DMsg').slideUp('slow', function()
                    {
                        $('.DMsg').remove();
                    });
                }, 10000);
            }   
        }

        var EachFile = 0
        $.each($('#Files')[0].files, function()
        {
            ++EachFile;
            Upload();
        });
    }
});

HTML：

<div id="UForm">
    <form action="" method="post" enctype="multipart/form-data">
        <input type="file" class="Files" id="Files" name="File[]" />
        <input type="submit" name="Submit" class="AB" id="Submit" value="Upload!" />
        <div id="Progress"></div>
        <div class="Caption"><label id="Loaded"></label></div>
    </form>
</div>

很抱歉代码很多。

Answer 1

它显示了一个很大的负载条，因为你正在搜索带有DMsg类的元素和从上到下的jquery搜索，所以它总能找到你设置的第一个加载条。

您需要一种方法为每个新栏设置不同的ID，或者当您执行

时

$('#Wrapper').find('.DMsg').hide().slideDown('slow');

找到获得最后结果的方法。

为每个文件JQuery和AJAX创建上载状态

1 个答案: