0

JQueryフォームプラグインの公式Webサイトでこの例に従っています。ページに 4 つのフォームがあり、各フォームには 1 つのファイル入力フィールドと progress があることを除けば、機能します.bar。.barファイルがアップロードされているフォームの幅のみを更新したい。.bar内部uploadProgressコールバック を区別するにはどうすればよいですか?

    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        $('.bar').width(percentVal)
    },
4

1 に答える 1

1

次のように、アップロード コールバックを定義するときに、ID または一部の属性を操作し、ジェネレータ関数を使用します。

 function getProgressUpdater(target) {
    target = $(target); 
    return function(event, position, total, percentComplete) {
      var percentVal = percentComplete + '%';
      target.width(percentVal);
    }
 }

 // ajax bla ...
 {
   uploadProgress : getProgressUpdater('.bar[data-progress-bar="some-id-or-name"'),
 // other ajax stuff
 }

編集:/ このソリューションは、より洗練されたシナリオに簡単に拡張できます。4つのフォームを想像してください。次のように、各フォームに追加の属性を追加します。

<form class="upload" data-form-id="my-form1"> <!-- stuff --></form>
<form class="upload" data-form-id="my-form2"> <!-- stuff --></form>
<form class="upload" data-form-id="my-form3"> <!-- stuff --></form>
<form class="upload" data-form-id="my-form4"> <!-- stuff --></form>

各フォームには、次のような進行状況バーがあります。

<div class="progressbar" data-progress-of="my-form1"></div>

これで、次のように jquery フォームをアタッチできるようになりました。

$('.upload').each(function(i, form) {
   var $form = $(form), formId = $form.attr('data-form-id'), $progbar = $('.progressbar[data-progress-of="' + formId + '"]');

   $form.ajaxForm({
    // bla
     uploadProgress : getProgressUpdater($progbar)
   });
});

この方法では、約 10 行のコードを追加するだけで、非常に柔軟で堅牢になります。

于 2013-06-25T07:03:10.703 に答える