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


Create upload status for each file JQuery and AJAX

我有一个AJAX上传工作,一切都准备好了,除了百分比和进度条,用户真的看不到任何信息。我要做的是为每个文件创建一个div并显示每个文件的进度。我是否必须使用flash或我可以做到这一切从jquery,因为我得到了ajax部分完成所有剩下的是使div为每个文件,并显示每个进度条。如果我要上传多个文件,它会显示一个进度条,将所有文件一起上传,我想为每个文件分别上传。所以基本上有一个表单来选择多个文件,并为每个文件创建一个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>

抱歉,有这么多代码

它显示了一个大的加载条,因为你正在用DMsg类搜索元素,jquery从自上而下搜索,所以它总是会找到你设置的第一个加载条。

你需要一种方法来为每个新栏设置不同的id或者当你执行

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