web-dev-qa-db-ja.com

jQueryファイルのアップロードにおける個々の進捗状況

BlueimpによるjQueryファイルのアップロードを使用することをお勧めします。

しかし、個々のファイルの進行状況を更新できません。組み合わされた進捗状況がどのように機能するかを理解しています（文書化されているとおり）

progressall: function (e, data) 
        {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css('width', progress + '%');
            console.log(progress);
        }

すべてのアップロードに対して同じことを行う方法は？この特定のアップロードにリンクされているDOM要素（プログレスバー）を取得するにはどうすればよいですか？ファイル名とファイルサイズでIDを作成することを考えていましたが、ユーザーが同じファイルを2回（異なる宛先に）アップロードできるため、これは機能しません。

これは現時点での私の実装です：

$('#fileupload').fileupload(
    {
        dataType: 'json',
        done: function (e, data) 
        {
            $.each(data.result.files, function (index, file) 
            {  
                //$('<p/>').text(file.name).appendTo(document.body); 
                //console.log('done with '+file.name);
            });
        },
        progressall: function (e, data) 
        {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            //$('#progress .bar').css('width', progress + '%');
            //console.log(progress);
        }
    }).on('fileuploadadd', function (e, data) 
    {
        $.each(data.files, function (index, file) 
        {

            var node = $('<div class="progressBox"></div>');
            node.append('<div class="progressBoxBack"></div>');
            node.append('<p><span class="progress-filename">'+file.name+' ('+index+')</span><br /><span class="progress-info">0%  0 ko/s  0 sec left</span></p>');
            node.append('<div class="progressBar"><div style="width:23%;"></div></div>');

            node.appendTo($('#progressContainer'));
        });
    });

誰かが私に方法を教えたり、私が見つけられなかったドキュメントを教えてもらえますか？

解決

.on('fileuploadadd', function (e, data) 
    {
        $.each(data.files, function (index, file) 
        {
            file.uploadID = 'someidentification' ;
        });
    });

次に、進行状況を処理するとき：

progress: function (e, data) {
              var progress = parseInt(data.loaded / data.total * 100, 10);

              console.log(data.files[0].uploadID); // returns 'someidentification'

        }
javascriptjqueryhtmlfile-uploadjquery-file-upload
19
Vincent Duprez

ドキュメントによると、単一の進行状況イベントがあります ：

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        progress: function (e, data) {
              var progress = parseInt(data.loaded / data.total * 100, 10);
        },
        ...
2
Fractaliste

これは古い質問だと理解していますが、このトピックに関するGoogle検索結果で非常に高く表示され、提供される回答は標準のユースケースで必要とされるよりも複雑になる可能性があります。

データオブジェクトは、ファイルを追加してDOM要素をその特定のファイルアップロードに関連付けるときに設定できるコンテキストプロパティを提供します。これは渡され、doneコールバックで使用でき、リンクされたDOM要素内の進行状況に影響を与えるために使用できます。

$("#fileupload").fileupload({

        ...

        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        },

        ...

        progress: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            data.context.text(progress + '%');
        }
    });
3
Alpaus

php（バージョン5.4以降）には、 session upload progress 。これにより、個々のファイルのアップロードの進行状況を監視できます。

実行するのはかなり面倒かもしれませんが、XMLHttpRequest/Ajaxリクエストでjqueryと組み合わせる方法の例をいくつか見つけることができます Googleで検索する場合 。

また、言及されています jqueryファイルアップロードプラグインのドキュメントにあります

0
Wilt