0

私は AJAX のアップロードが機能しており、すべての準備が整っています。ユーザーが表示できる情報は、パーセントとプログレス バー以外にはありません。私がやりたいことは、各ファイルの div を作成し、それぞれの進行状況を表示することです。フラッシュを使用する必要がありますか、それともすべて jquery から行うことができますか? Ajax の部分が完了したので、残っているのは各ファイルの div を作成し、それぞれの進行状況バーを表示することだけです。複数のファイルをアップロードすると、すべてのファイルを一緒にアップロードしている 1 つのプログレス バーが表示されます。基本的に、複数のファイルを選択し、各ファイルの div を作成して、それぞれの完了率を表示する 1 つのフォームを用意します。

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>

コードが多くてすみません。

4

1 に答える 1

0

DMsg クラスで要素を検索し、jquery がトップダウンで検索するため、大きな負荷バーが表示されます。これにより、設定した最初の負荷バーが常に検出されます。

新しいバーごとに異なる ID を設定する方法が必要です。

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

最後の結果を得る方法を見つけます。

于 2013-02-28T00:07:49.617 に答える