如何在处理ajax请求时禁用拖放和浏览事件


How to disable drag and drop and browse events while an ajax request is in process?

我想防止用户在处理前一个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 start:

 $(document).ajaxStop( function( ) {
//how can i add div back say : add <div id='total'></div> after <div id='someid'></div>
});

是否有任何可能性,我可以停止第二个ajax请求,而第一个ajax是在处理?

当ajax正在进行时,除了enabling/disabling拖放之外,我认为更好的解决方案是显示覆盖该区域的透明或半透明覆盖,并防止用户选择任何可拖放。

使用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()success()中使用$('.checked').show();$('.checked').hide();

最后我用了

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