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.
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.
Erwin, bedankt voor je snelle reactie. Ik heb even gekeken.. Maar ik word er zo 1..2..3.. niet echt veel wijzer van.
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?
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:
$("#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
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.
Ik zit even te kijken, maar ik snap niet precies wat 't javascript nu doet.
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?
Aan php kant krijg je gewoon de normale input, daar kan je in feite doen wat je altijd doet. Alleen bij de output moet je opletten, maar als je vaker AJAX calls maakt dan zal je al weten wat wel en niet kan denk ik.
Bij het stukje script dat ik gaf moet je je dit nog voorstellen. Je hebt dus een form in je pagina als volgt:
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:
Als je foto binnenkrijgt aan de php kant, dan heb je feitelijk alles al :-)
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.
Ik heb inderdaad de foto voor elkaar gekregen en is geupload.
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.
