hoe kan ik geuploade files automatisch laten verschijnen in een div

Wat heb je nu aan AJAX code? En hoe ziet die callback eruit?

Sorry, dit is de goede. Had eerst de verkeerde gepost

 function ajax_file_upload(file_obj) {
			if(file_obj != undefined) {
				var form_data = new FormData();                  
				form_data.append('file', file_obj);
				$.ajax({
					
					type: 'POST',
					url: '',
					contentType: false,
					processData: false,
					data: form_data,
					
					beforeSend: function () {
                        $(".uploadspinner").show();
                    },
								
					success:function(data) {
					  $(".echo").append(data);
					  $('#selectfile').val('');

					  
					  $(".uploadspinner").hide();
					  $(".uploadarea").hide();
					  $(".echomessage").delay(5000).fadeOut(500);
					  window.location.hash='close'; /* disappear modal */
					   
					}
					
					
					
								
				});
			}
	    }

Eigenlijk zou je je AJAX-request direct na elke upload moeten uitvoeren.
Die geeft (bijv. in JSON) een callback met alle bestanden die geupload zijn. En die lees dan uit, en plaats je in je div.

Maar de ajax request wordt na elke upload uitgevoerd. Ik heb de php afhandeling ook in hetzelfde bestand staan. Vandaar dat de url in de ajax ook leeg is. Probleem is: de foreach-loop moet opnieuw doorlopen worden om alle bestanden weer weer te geven. En omdat alles in hetzelfde bstand staat, moet er een refresh plaatsvinden om nieuwe geuploade files weer te geven

Ik zou toch aanraden om een URL mee te geven. Want een callback is bijna nooit hetzelfde bestand waar vanuit je werkt. Deze moet ene overzicht geven van alle bestanden die er zijn. En bij voorkeur in JSON-format.

Ik zie het probleem niet?
Als je de pagina initieel laadt toon je de bestanden die al aanwezig zijn.
Aan de callback-functie van je JS-code (deze wordt pas uitgevoerd als het afhandelende script -die je bestand uploadt- klaar is) geef je het bestand mee dat zojuist (succesvol) is geupload?
Wellicht moet je dat rijtje dan nog opnieuw sorteren maar dat is alles wat je hoeft te doen?

Het wordt natuurlijk een ander verhaal als er verschillende gebruikers dit tegelijkertijd kunnen doen op dezelfde plaats. Dan zul je wel op een of andere manier moeten pollen ofzo.

ik heb nu de div waarin alle files staan opnieuw laten laden met de load() functie

$.ajax({
					
					type: 'POST',
					url: '',
					cache: false,
					contentType: false,
					processData: false,
					data: form_data,
					
					beforeSend: function () {
                        $(".uploadspinner").show();
                    },
								
					success:function(data) {
					  $(".echo").append(data);
					  $('#selectfile').val('');
					  
					  
					  $('.myFiles').load(document.URL +  ' .table-responsive');
					  
					  $(".uploadspinner").hide();
					  $(".uploadarea").hide();
					  $(".echomessage").delay(5000).fadeOut(500);
					  window.location.hash='close'; /* disappear modal */
					   
					}
					
					
					
								
				});

Het werkt perfect. Geen harde refresh nodig en laadt toch het bestand direct in de lijst nadat upgeload is. Maar is dit wel de correcte manier om het zo te doen?

Dat is toch nog steeds een complete pageload op de achtergrond, waarbij het ".table-responsive" deel er wordt uitgevist (en hierbij wordt een parser aan het werk gezet om dat hele document te analyseren - dit lijkt mij niet efficiënt)? Als je het op die manier doet zou het waarschijnlijk logischer zijn dat je een PHP-script aanroept die enkel een lijstje van aanwezige bestanden retourneert (bijvoorbeeld in JSON-formaat, of direct in HTML). Niet meer, en niet minder dan dat.

Dit PHP-script moet natuurlijk op dezelfde manier beveiligd worden als enige beveiliging die nu aanwezig is om bestanden af te schermen uiteraard.

Plus ik zou daar ook een callback aanhangen, zodat je de spinner pas verbergt (en alle andere acties die volgen) op het moment dat load() ook echt klaar is.