Jquery Form Plugin:仅当表单具有enctype标记时如何显示进度条

时间:2013-08-02 10:31:55

标签: forms jquery-plugins

我正在使用Jquery Form Plugin通过Ajax提交数据,我没有问题。 我还成功实现了进度条。

我希望仅在表单包含标签enctype =“multipart / form-data”时才显示进度条,但我在AjaxForm对象中读取表单属性时遇到问题:

$('.form_to_main').ajaxForm({
    delegation: true,
    target: '#main_content',
    beforeSend: function(arr, myform, options) {
      _is_loading = true;
      $('#loading').fadeIn();
      //here something like if($(myform).attr("enctype") != '')
      $('#loading .progress_bar .bar_container .bar').width('0%')
      $('#loading .progress_bar .percent').html('0%');
      //else $('#loading .progress_bar).hide();
    },
    beforeSubmit: function() {
      if (_is_loading) return false;
    },
    uploadProgress: function(event, position, total, percentComplete) {
      $('#loading .progress_bar .bar_container .bar').width(percentComplete + '%')
      $('#loading .progress_bar .percent').html(percentComplete + '%');
    },
    error: function(xhr) {
      BoxErrorShow('Connection error: ' + xhr.status + ' ' + xhr.statusText);
      $('#loading').hide();
      _is_loading = false;
    },
    success: function() {
      $('#loading .progress_bar .bar_container .bar').width('100%')
      $('#loading .progress_bar .percent').html('100%');
      $('#loading').hide();
      _is_loading = false;          
    }
  });
});

在beforeSend:方法中我想检查enctype属性,但是我不清楚访问表单对象。

感谢您的支持

更新 - 已解决 我在beforeSend函数中使用了beforeSubmit参数。 所以正确的代码如下:

$('.form_to_main').ajaxForm({
    delegation: true,
    target: '#main_content',
    beforeSend: function() {
      _is_loading = true;
      $('#loading').fadeIn();
      $('#loading .progress_bar .bar_container .bar').width('0%')
      $('#loading .progress_bar .percent').html('0%');
    },
    beforeSubmit: function(arr, myform, options) {
      if ($(myform).attr("enctype") == 'multipart/form-data') $('#loading .progress_bar').show();
      if (_is_loading) return false;
    },
    uploadProgress: function(event, position, total, percentComplete) {
      $('#loading .progress_bar .bar_container .bar').width(percentComplete + '%')
      $('#loading .progress_bar .percent').html(percentComplete + '%');
    },
    error: function(xhr) {
      BoxErrorShow('Connection error: ' + xhr.status + ' ' + xhr.statusText);
      $('#loading').hide();
      _is_loading = false;
    },
    success: function() {
      $('#loading .progress_bar .bar_container .bar').width('100%')
      $('#loading .progress_bar .percent').html('100%');
      $('#loading .progress_bar').hide();
      $('#loading').hide();
      _is_loading = false;
    }
  });
});

1 个答案:

答案 0 :(得分:0)

已解决我在beforeSend函数中使用beforeSubmit参数。 有关详细信息,请参阅答案。