php - how to disable drag and drop and browse event while ajax request is in process -

php - how to disable drag and drop and browse event while ajax request is in process -

i want prevent user stop selecting or drag , drop while previous ajax request in process.

how can this...

here code js code :

#drag div id of drag , drop area

$( '#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: want clear files selected already?" ) == true) { upfiles = event.originalevent.datatransfer.files; upfiles = array.prototype.slice.call(upfiles, 0); $('#filetoupload').val(''); } else return; } $( "#filetoupload" ).trigger( 'change' ); });

after clicking on upload button:

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

here ajax request :

$( '#container' ).on( 'upload', '#filetoupload' , function( ) { if ( typeof upfiles[count] === 'undefined') homecoming false; var info = 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); } homecoming xhr; }, success: function(data){ if( percentcomplete <= 100 ) { $('#pb div').animate({ width: '100%' }, { step: function(now) { $(this).text( math.round(now) + '%' ); }, duration: 10}); } $('#uplcomp').append( info ); } });

how can prevent user while previous files upload in progress.

updated

ok got upto extent (but not idea, user can add together div firebug , send files again)

i have used

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

and in ajax start :

$(document).ajaxstop( function( ) { //how can add together div : add together <div id='total'></div> after <div id='someid'></div> }); is there possibility can stop sec ajax request while first ajax in process?

apart enabling/disabling drag , drop while ajax in progress, believe improve solution show transparent or translucent overlay covers area , prevent user selecting draggable.

for disabling/enabling using jquery:

use $( "#total" ).draggable( "disable" ); within beforesend() function of ajax.

use $( "#total" ).draggable( "enable" ); within success() of function ajax

using css:

demo: 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>

just toggle hide/show during ajax

use $('.checked').show(); in beforeshow() , $('.checked').hide(); in success()

php jquery ajax file-upload drag-and-drop