Question

我在JQuery表单插件官方网站上关注此example。它的工作原理除了我在页面上有四个表单，每个表单有一个文件输入字段和一个进度.bar。我只想更新正在上传文件的表单的.bar宽度。如何区分.bar内部uploadProgress回调中的每个uploadProgress: function(event, position, total, percentComplete) { var percentVal = percentComplete + '%'; $('.bar').width(percentVal) },？

{{1}}

Answer 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行代码，但要使其非常灵活和强大。

ajax文件上传：区分uploadProgress回调中的不同表单

1 个答案: