Uploaden met JS / AJAX?
Op sommige website's zie ik wel eens van die systeempjes, dat je meerdere bestanden tegelijk kan uploaden.
Zodra ik een bestand selecteert, komt het onder in een lijstje te staan, en kan ik ze ook uit de lijst verwijderen. De bestanden zijn dus op dat moment ook nog niet geupload.
Pas als op een knop gedrukt word, worden deze files 1 voor 1 geupload.
Nu vind ik dit een mooi systeem, en zou dit graag ook willen toepassen. Alleen ik heb eerlijk gezegt geen idee hoe ze dit doen.
Kan iemand me veder helpen?
Alvast bedankt!
Maar uiteraard zijn er wel oplossingen voor :-). Zoals altijd kan ik het alleen uitleggen met JQuery, dus als je dat gebruikt kan je eens kijken naar de JQuery form plugin: http://jquery.malsup.com/form/
Met deze plugin heb ik zelf ook een file upload script gebouwd dat zoals je zegt, een voor een de bestanden upload en tijdens en na elke upload de status en het resultaat laat zien.
Heb je misschien een voorbeeldje van hoe je zoon lijst maakt, dinge eruit kan halen en als je op een knop drukt, de lijst upload?
Of vraag ik nu te veel van je? :P
Gewijzigd op 24/02/2012 19:46:01 door Cake Masher
Belangrijkste is dat je moet weten dat je geen bestanden kunt uploaden via de normal AJAX manier, met een XMLHttpRequest. Dat staat hier ook verder uitgelegd: http://jquery.malsup.com/form/#file-upload
Dat form plugin gebruikt een iframe om het alsnog wel te doen. Alleen wat wel belangrijk is om te weten is dat je data dus vanuit een html form verstuurd moet worden. Bij andere AJAX calls doe ik dat niet, omdat je toch de data met javascript moet uitlezen, maar in dit geval moeten de inputs dus echt binnen een form staan.
Als je dan wilt uploaden kan je het op de volgende manier doen:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$("#form_id").ajaxSubmit({
url: "http"//www.blabla.nl/upload.php",
data: {action: "upload_file"},
dataType: "json",
success: function(res){
}});
//edit: } ontbrak op de laatste regel
url: "http"//www.blabla.nl/upload.php",
data: {action: "upload_file"},
dataType: "json",
success: function(res){
}});
//edit: } ontbrak op de laatste regel
Dit lijkt dus bijzonder veel op de normale get en post ajax calls uit JQuery, alleen doe je het nu met een submit functie uit die plugin.
De functie zal alle inputs uit je form meesturen met de waarde, net als een normale actie in een form zou doen. Maar je kan nog wel extra velden meegeven in de "data" parameter (ik heb hier een action meegegeven). Het datatype is json, wat ik dus terugkrijg van de server, maar dat kan ook gewoon HTML of text zijn. Verder wordt er een success callback gedaan waarin je dan nog meldingen kan geven of het heeft gewerkt of niet.
Probeer dit eens. Maak een form met een file input en een knop en probeer je file te uploaden met deze functie.
Gewijzigd op 24/02/2012 20:06:44 door Erwin H
ajaxSubmit, houd dat niet in dat hij de #form_id gaat submitte? of betekend dat, dat hij dat uitvoerd, zodra het forum #form_id word gesubmit d.m.v. submit button?
En hoe moet ik dat precies opvangen met PHP? Gewoon zelfde als ik normaal ook zou doen? of is dit anders?
Bij het stukje script dat ik gaf moet je je dit nog voorstellen. Je hebt dus een form in je pagina als volgt:
Code (php)
1
2
3
4
2
3
4
<form id="form_id" method="post">
<input type="file" name="picture_file">
</form>
<input type="submit" value="upload" id="upload_knop">
<input type="file" name="picture_file">
</form>
<input type="submit" value="upload" id="upload_knop">
Let op dat ik de knop BUITEN het form heb geplaatst! Dat is later nodig als je meerdere forms na elkaar wil kunnen versturen. Daarnaast willen we niet dat het form automatisch verstuurd wordt als je op de knop klikt.
De functie die ik boven gaf moet dus in de click handler van de submit button, dus:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
$("#upload_knop").click(function(){
$("#form_id").ajaxSubmit({
url: "http"//www.blabla.nl/upload.php",
data: {action: "upload_file"},
dataType: "json",
success: function(res){
//doe iets na upload
}
});
});
});
$("#upload_knop").click(function(){
$("#form_id").ajaxSubmit({
url: "http"//www.blabla.nl/upload.php",
data: {action: "upload_file"},
dataType: "json",
success: function(res){
//doe iets na upload
}
});
});
});
Gewijzigd op 24/02/2012 20:22:01 door Erwin H
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
35
36
37
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
35
36
37
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Page</title>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="../js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready (function ()
{
$("#upload_knop").click (function ()
{
$("#form_id").ajaxSubmit ({
url: "upload.php",
data: {action: "upload_file"},
dataType: "json",
success: function(res){
alert ("Ok");
}
});
});
});
</script>
</head>
<body>
<form id="form_id" method="post">
<input type="file" name="picture_file" />
</form>
<input type="submit" value="upload" id="upload_knop" />
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Page</title>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="../js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready (function ()
{
$("#upload_knop").click (function ()
{
$("#form_id").ajaxSubmit ({
url: "upload.php",
data: {action: "upload_file"},
dataType: "json",
success: function(res){
alert ("Ok");
}
});
});
});
</script>
</head>
<body>
<form id="form_id" method="post">
<input type="file" name="picture_file" />
</form>
<input type="submit" value="upload" id="upload_knop" />
</body>
</html>
Edit:
Fout lag bij mij, ik had $_FILES['file'] i.p.v. $_FILES['picture_file'] in het php gedeelte.
Gewijzigd op 24/02/2012 20:34:53 door Cake Masher
De output van php heb ik dus in het voorbeeld op json gezet, wat betekent dat je eventuele foutmeldingen in json formaat moet encode alvorens het terug te sturen.
Alleen dat fout afhandelen krijg ik nog niet echt voor elkaar. Als er nou iets fout gaat aan de PHP kant, hóe krijg ik het dan voor elkaar dat jquery niet 'success' uit voert?
Edit:
Maar ik zit ook even te kijken. Mijn scenario is als volgt:
Ik heb 1 grote form, met allemaal input fields waarmee ik iets in een database zet. Nu wil ik daar graag 'bijlagen' bij kunnen toevoegen, en dan wou ik graag dat je een bestand selecteert. Zodra deze is geselecteerd, komt die ergens in een lijstje te staan (waar je 'm ook uit kan verwijderen). Als het bestand in dit lijstje staat, kan je nog 1 aan klikken.. en nog 1.. en nog 1.. etc...
Als je dan op de verstuur knop drukt, dan upload hij alle files, en vervolgens handelt hij de rest van de input fields af.
Dat was mijn plan zoon beetje..
Gewijzigd op 24/02/2012 20:45:27 door Cake Masher
Ik maak een array van foutmeldingen aan in php. Is die aan het einde leeg, dan geef ik een 0 terug, is die niet leeg (er zijn dus meldingen) dan geef ik een 1 terug, plus de foutmeldingen.
Aan de client kant kan ik dus uit het resultaat (wat ik in de variabele res terugkrijg) uitlezen wat er is gebeurt.
Zeg aan de php kant heb ik een melding en geef 1 terug, dan ziet mijn result array er als volgt uit:
Code (php)
1
2
3
4
2
3
4
<?php
$result[0]["result"] = 1;
$result[0]["messages"] = array("Bestand te groot", "Formaat niet goed");
?>
$result[0]["result"] = 1;
$result[0]["messages"] = array("Bestand te groot", "Formaat niet goed");
?>
Aan de client kant check ik dan in de res variabele wat er aan de hand was:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function(){
$("#upload_knop").click(function(){
$("#form_id").ajaxSubmit({
url: "http"//www.blabla.nl/upload.php",
data: {action: "upload_file"},
dataType: "json",
success: function(res){
if (res[0].result == 0){
//alles ok, doe iets
} else {
//iets fout, laat de foutmeldingen ergens zien
}
}
});
});
});
$("#upload_knop").click(function(){
$("#form_id").ajaxSubmit({
url: "http"//www.blabla.nl/upload.php",
data: {action: "upload_file"},
dataType: "json",
success: function(res){
if (res[0].result == 0){
//alles ok, doe iets
} else {
//iets fout, laat de foutmeldingen ergens zien
}
}
});
});
});