0

我在 JQuery 表单插件官方网站上关注这个例子。它的工作原理是页面上有四个表单，每个表单都有一个文件输入字段和一个进度.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 回答