我想防止用户在处理前一个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" );
:
演示: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");
}