hoe kan ik geuploade files automatisch laten verschijnen in een div
Mijn code ziet er nu zo uit:
Code (php)
1
2
3
4
2
3
4
$dir = 'uploads/'.$UserID;
...
$files = scandir($dir);
?>
...
$files = scandir($dir);
?>
<!-- output files -->
<div class="myFiles">
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
Code (php)
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
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 */
}
});
}
}
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
Die geeft (bijv. in JSON) een callback met alle bestanden die geupload zijn. En die lees dan uit, en plaats je in je div.
Gewijzigd op 12/01/2019 13:08:36 door - Ariën -
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.
Code (php)
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
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 */
}
});
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?
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