Avatar billede mazey Praktikant
19. juni 2014 - 21:24 Der 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.

Colorbox formen ser således ud:

<form action="processForm.php" id="formID" method="post" enctype="multipart/form-data">
<input type="file" name="files[]" multiple="multiple"> 
<input type="text" name="test">
<input type="submit" value="Upload" name="submit">
</form>

<script type="text/javascript">
$(function() {
$("#formID").submit(function() {
$.post($(this).attr("action"), $(this).serialize(), function(data) {
$.colorbox({html:data});
},
'html');
return false;
});
});
</script>

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?

På forhånd tak.
Avatar billede keysersoze Guru
19. juni 2014 - 23:59 #1
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.
Avatar billede mazey Praktikant
20. juni 2014 - 22:22 #2
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.

Håber du forstår...
Avatar billede keysersoze Guru
20. juni 2014 - 22:59 #3
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/
Avatar billede mazey Praktikant
21. juni 2014 - 00:39 #4
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).

Har ændret min fil således, at den nu ser således ud:
  <html>
  <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
  <script src="http://malsup.github.com/jquery.form.js"></script>
  </head>
  <body>
  <div>
  <form action="processForm.php" id="myForm" method="post" enctype="multipart/form-data">
  <input type="file" name="files[]" multiple="multiple">
       
  <input type="text" name="test">
  <input type="submit" value="Upload" name="submit">
  </form>

  <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?
Avatar billede mazey Praktikant
21. juni 2014 - 00:52 #5
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.

Bare lige til info...
Avatar billede keysersoze Guru
21. juni 2014 - 08:18 #6
Det er vel fordi du så ender med et normalt post og altså ikke noget AJAX.

Du må prøve at kigge på din developer toolbar - http://www.web-dev.dk/post/2012/06/17/Bliv-en-hurtigere-webudvikler-med-browservc3a6rktc3b8jer.aspx - og se om der sker fejl, fx manglende filer eller javascript-fejl.

Alternativt læg det online og giv os et link.
Avatar billede mazey Praktikant
22. juni 2014 - 13:24 #7
Jeg vil sætte stor pris på, om I vil kigge det, for er bare overhovedet ikke skrap i AJAX.

Jeg har lagt det online her: http://mazey.dk/des/

Der er foruden hele colorbox setuppet 3 filer:
index.php - hvor colorbox kaldes og et link, der kalder formen (temp.php).

temp.php - formen, der gerne skulle kunne afvikle et filupload igennem PHP vha. AJAX.

processForm.php - her kommer selve PHP koden, men ligenu blot en print $_FILES for at se output.

har også lagt det hele i en zip-fil http://mazey.dk/des/des.zip
Avatar billede keysersoze Guru
22. juni 2014 - 23:23 #8
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 :)
Avatar billede mazey Praktikant
24. juni 2014 - 20:12 #9
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
Avatar billede keysersoze Guru
25. juni 2014 - 09:36 #10
Hvis du kigger i deres dokumentation, eller bare den kode du har copy/pasted ind på din egen, ligger svaret mere eller mindre der.

http://www.jacklmoore.com/colorbox/example3/ - Demonstration of using callbacks
Avatar billede mazey Praktikant
25. juni 2014 - 22:06 #11
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?

Jeg takker mange gange for din tålmodighed :-D
Avatar billede keysersoze Guru
26. juni 2014 - 21:27 #12
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.
Avatar billede mazey Praktikant
26. juni 2014 - 22:24 #13
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 ;-)
Avatar billede mazey Praktikant
26. juni 2014 - 23:02 #14
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?
Avatar billede keysersoze Guru
27. juni 2014 - 09:13 #15
Har du kigget i din developer toolbars console?
Avatar billede mazey Praktikant
29. juni 2014 - 20:09 #16
Nej, det har jeg ikke - og det dumme spørgsmål, hvad er det? :-)
Avatar billede mazey Praktikant
29. juni 2014 - 20:41 #17
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 :-)
Avatar billede keysersoze Guru
29. juni 2014 - 20:46 #18
Kig på mit link i #6 - det er tæt på umuligt at udvikle uden kendskab til det.

I dit link kan jeg se at du er tilbage til dit gamle AJAX, som jeg har sagt ikke vil virke. Hvor blev ajaxForm af?
Avatar billede mazey Praktikant
29. juni 2014 - 21:00 #19
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 kigger lige på developer toolbar...
Avatar billede mazey Praktikant
29. juni 2014 - 21:12 #20
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?
Avatar billede keysersoze Guru
29. juni 2014 - 21:49 #21
Fjern din $.post og indsæt ajaxForm i stedet.
Avatar billede mazey Praktikant
29. juni 2014 - 22:12 #22
Det har jeg gjort,

Jeg er tilbage ved ajaxForm nu:

$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
});
});
Avatar billede keysersoze Guru
29. juni 2014 - 22:53 #23
document ready er ikke ajaxForm specifikt - det skal ikke med. Men udover det så benyt din konsol til at se hvad der sker/ikke sker.
Avatar billede mazey Praktikant
29. juni 2014 - 23:04 #24
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?
Avatar billede keysersoze Guru
29. juni 2014 - 23:06 #25
Måske en idé at inkludere .js-filen til ajaxForm.
Avatar billede mazey Praktikant
29. juni 2014 - 23:31 #26
;-) Har du helt sikkert ret i - den har jeg nu fundet og inkluderet, men det gav desværre stadig samme fejl i Chrome.

I FireFox ser det ud til, den ikke fejler på det, så det virker lidt underligt.
Avatar billede mazey Praktikant
30. juni 2014 - 00:16 #27
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!
Avatar billede Ny bruger Nybegynder

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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester