如何在 ajax 请求正在进行时禁用拖放和浏览事件？

Question

我想阻止用户在上一个 ajax 请求正在进行时停止选择或拖放。

我该怎么做...

这里是代码js代码：

#drag为拖放区的div id

$( '#drag ' ).bind( 'dragover',function(event) {
  event.stopPropagation();  
  event.preventDefault();   
 });

$( '#drag ' ).bind( 'drop',function(event) {
     event.stopPropagation();   
     event.preventDefault();
     if( upfiles == 0 )
     {
         upfiles = event.originalEvent.dataTransfer.files;
         console.dir(upfiles);
         upfiles = Array.prototype.slice.call(upfiles, 0);
      }
      else {
      if(confirm( "Drop: Do you want to clear files selected already?" ) == true) {
          upfiles = event.originalEvent.dataTransfer.files;
          upfiles = Array.prototype.slice.call(upfiles, 0);
          $('#fileToUpload').val('');
      }
      else
          return;
      }
      $( "#fileToUpload" ).trigger( 'change' );
        });

点击上传按钮后：

$("#upload_btn").click( function() {
 if ( upfiles ) {
 $( '#fileToUpload' ).trigger('upload'); // trigger the first 'upload' - custom event.
  $(this).prop("disabled", true);
  }
});

这里是 ajax 请求：

$( '#container' ).on( 'upload', '#fileToUpload' , function( ) {
   if ( typeof upfiles[count] === 'undefined') return false;
    var data = new FormData();
    var fileIn = $( "#fileToUpload" )[0];
    if( !upfiles ) 
        upfiles = fileIn.files; 
      $(upfiles).each(function(index, file) 
      {
           data.append( 'file'+index, file );
      });
   var request = $.ajax({
        url: 'files.php',
        type: 'POST',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        beforeSend: function( ) {
                    $(".progressbar").show();
            },
        xhr: function() {  
                var xhr = $.ajaxSettings.xhr();
                if(xhr.upload){ 
                        xhr.upload.addEventListener( 'progress', showProgress, false);
                }
                return xhr;
        },
        success: function(data){
            if( percentComplete <= 100 ) {
                    $('#pb div').animate({ width: '100%' }, { step: function(now) {
                            $(this).text( Math.round(now) + '%' );
                    },  duration: 10});
                    }
           $('#uplcomp').append( data );
        }
    });

如何在之前的文件上传过程中阻止用户。

更新

ok 到一定程度（但这也不是一个好主意，用户可以从 firebug 中添加 div 并再次发送文件）

我用过

 $( document ).ajaxStart(function() {
   $( "#total" ).remove();
 });

并在 ajax 开始：

 $(document).ajaxStop( function( ) {

//how can i add div back say : add <div id='total'></div> after <div id='someid'></div>

});

是否有可能在第一个 ajax 正在进行时停止第二个 ajax 请求？

Answer 1

除了 enabling/disabling 在 ajax 进行时拖放之外，我相信更好的解决方案是显示覆盖该区域的透明或半透明叠加层，并防止用户选择任何可拖动的对象。

使用 jquery 禁用/启用：

在ajax的beforeSend()函数中使用$( "#total" ).draggable( "disable" );。

在函数ajax的success()内使用$( "#total" ).draggable( "enable" );

使用 CSS：

演示：http://jsfiddle.net/lotusgodkk/GCu2D/184/

CSS：

.checked {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#BFBFBF;
    opacity:0.5;
    text-align:center;
}
.checked div {
    margin:0 auto;
    top:50%;
    left:50%;
    position:absolute;
}

HTML：

<div class="checked">
    <div>Please wait...</div>
</div>

只需在 ajax 期间切换隐藏/显示

在beforeShow() 中使用$('.checked').show();，在success() 中使用$('.checked').hide();

Answer 2

终于用上了

if($.active === 0)
{
   call ajax
}
else
{
   alert("please wait previous request is in process");
}