Uploaden met JS / AJAX?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Cake Masher

Cake Masher

24/02/2012 19:35:03
Quote Anchor link
Beste,

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!
 
PHP hulp

PHP hulp

28/03/2024 20:09:22
 
Erwin H

Erwin H

24/02/2012 19:38:29
Quote Anchor link
Heel strict genomen kan dat niet....

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.
 
Cake Masher

Cake Masher

24/02/2012 19:45:48
Quote Anchor link
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?

Of vraag ik nu te veel van je? :P
Gewijzigd op 24/02/2012 19:46:01 door Cake Masher
 
Erwin H

Erwin H

24/02/2012 19:48:26
Quote Anchor link
Vraag 1: gebruik je JQuery? Zo nee.... dan wordt dit wel een hele klus, zo ja dan kan ik je wel verder helpen.
 
Cake Masher

Cake Masher

24/02/2012 19:52:10
Quote Anchor link
Antwoord 1: Jah, ik gebruik de nieuwste JQuery die ik van hun website kon downloaden.
 
Erwin H

Erwin H

24/02/2012 20:01:13
Quote Anchor link
OK, dan kan ik je misschien helpen.

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)
PHP script in nieuw venster Selecteer het PHP script
1
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

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
 
Cake Masher

Cake Masher

24/02/2012 20:14:02
Quote Anchor link
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?
 
Erwin H

Erwin H

24/02/2012 20:20:36
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<form id="form_id" method="post">
  <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)
PHP script in nieuw venster Selecteer het PHP script
1
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
      }
    });
  });
});
Gewijzigd op 24/02/2012 20:22:01 door Erwin H
 
Cake Masher

Cake Masher

24/02/2012 20:33:24
Quote Anchor link
Als ik op de knop druk, gebeurt er niet echt veel. Ik heb op het moment het volgende:


Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>



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
 
Erwin H

Erwin H

24/02/2012 20:37:09
Quote Anchor link
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.
 
Cake Masher

Cake Masher

24/02/2012 20:39:00
Quote Anchor link
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.

Dat was mijn plan zoon beetje..
Gewijzigd op 24/02/2012 20:45:27 door Cake Masher
 
Erwin H

Erwin H

24/02/2012 20:45:53
Quote Anchor link
"success" betekent alleen dat de ajax call succesvol is verlopen, het zegt niets over of de upload zelf correct is gegaan (en zeker niet of bijvoorbeeld het plaatje wel goed was of niet).

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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<?php
$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)
PHP script in nieuw venster Selecteer het PHP script
1
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
        }
      }
    });
  });
});
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.