hoe kan ik geuploade files automatisch laten verschijnen in een div

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jack Maessen

Jack Maessen

12/01/2019 11:41:28
Quote Anchor link
Voor een uploadsysteem wil ik de geuploade bestanden direct laten verschijnen in een div.


Mijn code ziet er nu zo uit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
$dir = 'uploads/'.$UserID;
...
$files = scandir($dir);
?>

<!-- output files -->
<div class="myFiles">
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
foreach ($files as $file) {
// files worden uitgelezen


Als een bestand is geupload, hoe kan ik die dan direct laten verschijnen in de div myFiles zonder een harde refresh? Ik maak gebruik van AJAX
Gewijzigd op 12/01/2019 11:42:11 door Jack Maessen
 
PHP hulp

PHP hulp

25/03/2019 11:57:02
 
- Ariën -
Beheerder

- Ariën -

12/01/2019 11:43:10
Quote Anchor link
Wat heb je nu aan AJAX code? En hoe ziet die callback eruit?
 
Jack Maessen

Jack Maessen

12/01/2019 11:45:22
Quote Anchor link
Sorry, dit is de goede. Had eerst de verkeerde gepost
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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 */
                      
                    }
                    
                    
                    
                                
                });
            }
        }
Gewijzigd op 12/01/2019 11:51:51 door Jack Maessen
 
- Ariën -
Beheerder

- Ariën -

12/01/2019 12:12:06
Quote Anchor link
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.
 
Jack Maessen

Jack Maessen

12/01/2019 12:24:36
Quote Anchor link
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
 
- Ariën -
Beheerder

- Ariën -

12/01/2019 13:07:49
Quote Anchor link
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.
Gewijzigd op 12/01/2019 13:08:36 door - Ariën -
 
Thomas van den Heuvel

Thomas van den Heuvel

12/01/2019 15:53:23
Quote Anchor link
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.
 
Jack Maessen

Jack Maessen

13/01/2019 16:13:27
Quote Anchor link
ik heb nu de div waarin alle files staan opnieuw laten laden met de load() functie

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$.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?
 
Thomas van den Heuvel

Thomas van den Heuvel

13/01/2019 16:53:37
Quote Anchor link
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.
Gewijzigd op 13/01/2019 16:55:15 door Thomas van den Heuvel
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.