如何在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 );
        }
    });

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

更新

确定在一定程度上得到了它（但这也不是一个好主意，用户可以从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

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

使用jquery 禁用/启用：

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

在函数ajax

的$( "#total" ).draggable( "enable" );内使用success()

使用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

期间切换隐藏/显示

使用$('.checked').show();中的beforeShow()和$('.checked').hide();中的success()

Answer 2

最后我使用了

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