19. juni 2014 - 21:24Der er
26 kommentarer og 1 løsning
Colorbox (Ajax / javascript / jquery) og PHP filupload
Hej Eksperter,
Jeg har integreret Colorbox popup i et hjemmesideprojekt jeg er i gang med. Meningen med popup'en er, at der skal være en form, hvor brugeren kan uploade et eller flere billeder (HTML form og PHP).
Problemet består i, at jeg ikke kan få parset data fra Colorbox formen til PHP siden - eller det vil sige, at jeg kan sagtens se alle $_POST variable, men $_FILES returnerer intet. Jeg har forsøgt, at lave det udenom Colorbox og der virker det fint, så der er et eller andet jeg mangler i Colorbox, og jeg er på ingen måde skarp i Ajax, jQuery mm.
Jeg har så processForm.php hvor det eneste der er i den er:
print_R($_FILES); print_r($_POST);
Når jeg submitter et upload får jeg fint en værdi af tekstfeltet (test), men "files[]" returnerer bare et tomt array. Array ( ) Array ( [test] => randomtext )
Er der nogen, der har erfaring med Colorbox og upload af filer derigennem, som kan hjælpe mig på vej?
Hvis jeg forstår eksemplet korrekt; Du kan som udgangspunkt ikke uploade filer via AJAX - og så alligevel lidt afhængig af hvad du skal supporte af browsere, skal du have gamle browsere med skal du uploade gennem en skjult iframe og vil du kun understøtte nyere browsere kan du kigge på FormData. Vil du det lettest muligt så kig på jQuery Form Plugin.
Jeg forstår godt, hvis AJAX ikke kan uploade billeder i sig selv - det er også noget jeg har PHP til at gøre, når det er, og det kode har jeg lavet.
Jeg ønsker ret simpelt (og det kan være, det er det du mener), bare at vide hvordan jeg igennem Colorbox (AJAX) får min form værdier §_FILES til at komme med over på min "kodeside" processForm.php.
Det er jeg med på men svaret er præcis det samme - du kan ikke gøre det du gør uden at det bliver teknisk. Hvis du lavede et almindeligt post var alt fint og hvis du ser bort fra file-felterne er din AJAX også fin - men upload via AJAX kræver altså noget mere og søger du det lettest muligt så benytter du http://malsup.com/jquery/form/
OK - Jeg har kigget på det link, du har postet, og umiddelbart læser jeg det som omtrent simpelt copy/paste job, men det er det nok ikke helt... problemet er så bare, at jeg på ingen måde er en haj i AJAX (for ikke at sige komplet inkompetent).
<script> // wait for the DOM to be loaded $(document).ready(function() { // bind 'myForm' and provide a simple callback function $('#myForm').ajaxForm(function() { alert("Thank you for your comment!"); }); }); </script>
</div> </body></html>
Hvis jeg kører det, som ovenstående så loader den bare, uden at vise formen. Fjerner jeg scriptet for neden, så får jeg min form at se, så der er et eller andet i scriptet, der ikke er helt som det skal være... Nu spørger jeg så dumt, men er det script færdigt, eller mangler der noget kode, før det kan fungere, som jeg gerne vil have det?
Jeg har leget lidt med det script, og det er faktisk sådan, at hvis jeg fjerner $('#myForm').ajaxForm(function() { alert("Thank you for your comment!"); }); fra scriptet, så parser den faktisk $_FILES værdierne, men på "main" siden og udenom Colorbox.
Når du også loader indholdet i din colorbox asynkront køres document ready og dermed er der ikke noget jQuery Form Plugin så nogle alternative muligheder er a) load indholdet i colorbox sammen med sidens øvrige indhold, b) fjern document ready og javascriptet ned i bunden af siden eller c) kør ajaxForm-koden i colorbox's onComplete event.
Når du har valgt en avanceret måde at løse din opgave på må du også forvente at lære lidt nyt :)
Du har helt ret, og det er helt sikkert også altid det bedste, at lære noget nyt :-)
Problemet med, at fjerne javascriptet er, at colorboxen så bare lukker, og umiddelbart sker der så ikke noget (altså processForm når ikke at blive triggeret).
Den sidste metode du skriver, er jeg nok ikke helt med på - Vil det være noget ala det javascript, der er i bunden, eller hvordan?
Beklager virkelig min manglende viden her, men finder bare colorbox ret så smart, og vil allerhelst den vej, omend jeg ikke ved ret meget om det :-D
Okay - så jeg kan bruge en af de "Callback" funktioner, der er... Igen, og tilgiv mig min uvidenhed, men det virker for mig, som om at onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); } skal være den, der skal bruges - de andre før den, har vel kun til sinde, at loade selve indholdet af colorboxen?
Jeg er bare i tvivl om, hvordan jeg får "indkodet" processForm.php i det script, så jeg kalder den ved submit? Kan jeg bruge den jeg foreslår, og så include php filen imellem tuborgklammerne på en måde, eller hvordan?
Når jeg skriver at det skal gøres i onComplete mener jeg onComplete og ikke onCleanup - når du loader dynamisk indhold bliver din kode ikke eksekveret men bare indsat så din ajaxForm bliver aldrig kørt men det vil den gøre hvis du flytter den til onComplete i stedet for at loade det sammen med dit ajax-kald.
Ja, det var min fejl - så ikke, at du tidligere havde skrevet onComplete.
Nu har jeg lavet kaldet om til "callbacks" og på index siden har jeg tilføjet scriptet til kodedelen, således:
$(".callbacks").colorbox({ onComplete:function(){ $(document).ready(function() { // bind 'myForm' and provide a simple callback function $('#myForm').ajaxForm(function() { }); }); }, });
Jeg kan se, at den parser data, men den åbner stadig processForm i "main" vinduet - jeg ville gerne, at alt blev processeret i colorbox vinduet, som så lukker efter upload.
Jeg har forsøgt at lade temp.php indeholde alting, altså at putte alt fra processForm.php ind i den, og lade formens action stå tom, men det gjorde umiddelbart ikke noget godt.
Jeg føler jeg er tættere på, men måske jeg er helt forkert på den ;-)
Nu har jeg søgt lidt mere, og nu er jeg så et skridt videre...
1) jeg har fjernet scriptet i temp.php filen, men i stedet for ovenstående i index filen, har jeg skrevet dette:
$('#submitbtn').click(function() { $.post('processForm.php', $('#myForm').serialize(), function(){ // Anything here is executed if the post is successful alert('success');
Nu kan jeg få processForm.php til at gemme $_POST variabler i f.eks. en database, så $_POST bliver nu parset når jeg trykker "upload" men selve $_FILES forbliver stadig tom... er der så stor forskel på de 2, eller er der bare noget jeg nu har overset?
Hvis du prøver, at kigge her: www.mazey.dk/des/index.php og vælger en fil til upload, så ligner det jo nu, at den virker - jeg har så i processForm ladet den lagre værdierne i en databasetabel, og her virker $_POST variablen fint, men i feltet hvor filnavnet skal være, er den blank. Hvis jeg vælger at lade være med at køre med scriptet i index filen, og siden så bare åbner i main-vinduet, så virker det hele fint og værdierne gemmes korrekt.
Jeg ved godt at jeg sikkert gentager mig selv, men jeg forsøger at forstå og lære :-)
Jeg skulle da gerne være samme sted, som i mit #14 post? Altså hvor jeg får formen til at submitte og får en "Success" alert retur. POST variabler lykkes, men FILES ikke.
Jeg troede jo egentlig, at jeg var længere jf. #14, men når du nu refererer tilbage til den ajaxForm i #13, så er jeg hoppet tilbage dertil. Forskellen er bare, at med ajaxForm, så hopper den ud af Colorbox og viser output i main-vindue, hvor den i #14 outputtede i Colorbox, men bare ikke $FILES.
Jeg har kigget siden igennem med Developer Tools i Chrome, men kan så umiddelbart ikke se, at den melder nogen fejl.
Keysersoze, jeg ved godt, at jeg nok har taget en stor mundfuld i at ville have dette til at lykkes, og mange gange kan man komme langt med copy/paste - jeg kan dog godt se, at jeg nok her ikke har kunnet gabe højt nok, for jeg er bare ikke med så stort kendskab til ajax/jQuery. Jeg er bare ikke med på, om du mener at jeg i index.php filen i ajax funktionen skal kalde noget ajax-post agtigt, eller hvordan?
OK - den er fjernet, og nu har jeg så kun ajaxForm tilbage.
Kan se i konsollen, at den fejler med "Undefined is not a function" i selve ajaxForm(function()) (hvis jeg fjerner den, fejler den ikke).
Uncaught TypeError: undefined is not a function (index):25 $.colorbox.onComplete (index):25 Settings.get jquery.colorbox.js:200 complete jquery.colorbox.js:803 callback jquery.colorbox.js:872 $box.dequeue.animate.complete jquery.colorbox.js:701 r.complete jquery.js:9467 c jquery.js:3048 p.fireWith jquery.js:3160 l jquery.js:8922 x.fx.tick jquery.js:9499
Er det fordi, at der ikke er noget inde i ajaxForm funktionen?
Jeg tror faktisk, at jeg (læs: du) har fået det til at virke - jeg tilføjede den nyeste version af jquery også, og prøvede så herefter igen og vupti, så virkede den.
Nu har jeg så tilføjet en status-bar på colorboxen som malsup havde lavet som et lille eksempel, og denne fungerer også fint.
Jeg tror, at jeg langt om længe kan kalde udfordringen for løst - jeg vil gerne sige dig tak for din ualmindelige høje tålmodighed og måden hvorpå du hjælper - at du bare giver løsningen med det samme gavner ikke rigtigt - denne måde (om end jeg stadig på ingen måde er helt med) hjælper til forståelsen, så mange tak for det!
Synes godt om
Ny brugerNybegynder
Din løsning...
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.