Uploaden (PHP)
Het upload formulier
Het is nu de tijd dat we het upload formulier gaan maken. We noemen het bestand. ´winkelUpload.php´. Ik zal hier even niet al te veel op ingaan dan alleen in de file zelf.
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<?php
# Hier include we dus het config bestand. Dit natuurlijk aanpassen naar eigen pad.
include_once ('../Configs/winkelConfig.php');
# Hierin worden de foto's geupload. Zorg ook dat u deze map heeft aangemaakt en alle rechten heeft.
$UploadMap = '../winkelUploads/';
# Deze variable wordt straks gevuld met de bestands naam van de foto
$FotoNaam = '';
# Omdat er natuurlijk word gecontroleerd of er fouten zijn opgetreden maken wij hiervoor aan array aan.
# Als je niet weet wat een array is kun je nog even op php.net kijken.
$Bericht = array ();
# Toegestane extenties
$FotoExt = array('.jpg', '.jpeg', '.gif', '.png');
# In deze array zitten alle toegestane MIME types, deze kan je natuurlijk uitbreiden met doc, pdf bestanden.
$FotoMIME = array ('image/jpeg', 'image/pjpeg', 'image/png', 'image/x-png', 'image/gif');
# In deze variable definieren wij de maximale grote van het bestand. Wij zetten het even op 5 mb.
# Dit kan je natuurlijk gewoon aanpassen naar eigen wens.
$MaxFotoSize = 5000000;
# In deze variable zetten wij de pixel size van de thumbnail weer.
$ThumbSize = 90;
# Controleren of de pagina zichzelf heeft aangeroepen
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
# Als het formulier niet is verzonden of de pagina is foutief aangroepen
if (!isset($_FILES['foto']))
{
# dan vullen we hier de array met een fout melding. Deze wordt later weer uitgelezen door middel van een foreach.
$Bericht[] = 'U heeft geen foto geselecteerd!';
}
else
{
# Een array maken met alle waarden van de foto.
$Foto = $_FILES['foto'];
# Nu komt hetgene waar ik het daarnet overhad. Het controleren van de fouten. Dit doen we doormiddel van een switch statement.
switch ($Foto['error'])
{
case UPLOAD_ERR_OK:
# Het uploaden is goed gegaan, maar misschien is de foto groter dan toegestaan.
if ($Foto['size'] > $MaxFotoSize)
{
$Bericht[] = 'De foto is te groot. Hij mag niet groter zijn dan <b>' .$MaxFotoSize. '</b>';
}
# Kijken of het bestand wel een breedte en/of hoogte heeft
if(@!getimagesize($_FILES['foto']['tmp_name']))
{
$Bericht[] = 'Deze foto heeft geen breedte of hoogte';
}
break;
case UPLOAD_ERR_INI_SIZE:
# De foto is groter dan toegestaan in php.ini Dit is standaard 16 mb.
$Bericht[] = 'De foto is te groot.';
break;
case UPLOAD_ERR_PARTIAL:
# De foto is maar gedeeltelijk geupload. Variable $Bericht weer vullen met een foutmelding.
$Bericht[] = 'Er is een fout opgetreden tijdens het uploaden';
break;
case UPLOAD_ERR_NO_FILE:
# Er is geen bestand opgegeven om te uploaden. Array weer vullen.
$Bericht[] = 'U heeft geen foto opgegeven om te uploaden';
break;
default:
# Vanget: Er zou eigenlijk geen onbekende fout mogen optreden maar het is toch goed om hier een voorziening voor te treffen
$Bericht[] = 'Er is een onbekende fout opgetreden';
break;
} # Het einde van de switch statement.
if (empty($Bericht))
{
# Het uploaden is goedgegaan, want de array Bericht is nog leeg. (empty)
# We gaan u de extensie van de file controleren en kijken of hij is toegestaan. (Bovenin de file staan de toegestane extensie's weet je nog?)
if (!in_array($Foto['type'], $FotoMIME ))
{
# De MIME type die is opgegeven is niet toegestaan, de array bericht weer vullen met een andere foutmelding.
$Bericht[] = 'Deze extensie is niet toegestaan!';
}
# Extensie controleren
if(!in_array(strtolower(strrchr($_FILES['foto']['name'], '.')), $FotoExt))
{
$Bericht[] = ' Deze foto extentie is niet toegestaan';
}
# We gaan nu controleren of er al een foto bestaat met deze naam.
$FotoNaam = $UploadMap . $Foto['name'];
if (file_exists($FotoNaam))
{
# De naam van de foto bestaat dus al. Het mag natuurlijk niet voorkomen dat file's worden overgeschreven. Dat zou zonde zijn.
# De array weer vullen met een andere foutmelding. Natuurlijk mag je die helemaal aanpassen naar wat jij wilt!
$Bericht[] = 'Er bestaat al een foto met deze naam!';
}
?>
# Hier include we dus het config bestand. Dit natuurlijk aanpassen naar eigen pad.
include_once ('../Configs/winkelConfig.php');
# Hierin worden de foto's geupload. Zorg ook dat u deze map heeft aangemaakt en alle rechten heeft.
$UploadMap = '../winkelUploads/';
# Deze variable wordt straks gevuld met de bestands naam van de foto
$FotoNaam = '';
# Omdat er natuurlijk word gecontroleerd of er fouten zijn opgetreden maken wij hiervoor aan array aan.
# Als je niet weet wat een array is kun je nog even op php.net kijken.
$Bericht = array ();
# Toegestane extenties
$FotoExt = array('.jpg', '.jpeg', '.gif', '.png');
# In deze array zitten alle toegestane MIME types, deze kan je natuurlijk uitbreiden met doc, pdf bestanden.
$FotoMIME = array ('image/jpeg', 'image/pjpeg', 'image/png', 'image/x-png', 'image/gif');
# In deze variable definieren wij de maximale grote van het bestand. Wij zetten het even op 5 mb.
# Dit kan je natuurlijk gewoon aanpassen naar eigen wens.
$MaxFotoSize = 5000000;
# In deze variable zetten wij de pixel size van de thumbnail weer.
$ThumbSize = 90;
# Controleren of de pagina zichzelf heeft aangeroepen
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
# Als het formulier niet is verzonden of de pagina is foutief aangroepen
if (!isset($_FILES['foto']))
{
# dan vullen we hier de array met een fout melding. Deze wordt later weer uitgelezen door middel van een foreach.
$Bericht[] = 'U heeft geen foto geselecteerd!';
}
else
{
# Een array maken met alle waarden van de foto.
$Foto = $_FILES['foto'];
# Nu komt hetgene waar ik het daarnet overhad. Het controleren van de fouten. Dit doen we doormiddel van een switch statement.
switch ($Foto['error'])
{
case UPLOAD_ERR_OK:
# Het uploaden is goed gegaan, maar misschien is de foto groter dan toegestaan.
if ($Foto['size'] > $MaxFotoSize)
{
$Bericht[] = 'De foto is te groot. Hij mag niet groter zijn dan <b>' .$MaxFotoSize. '</b>';
}
# Kijken of het bestand wel een breedte en/of hoogte heeft
if(@!getimagesize($_FILES['foto']['tmp_name']))
{
$Bericht[] = 'Deze foto heeft geen breedte of hoogte';
}
break;
case UPLOAD_ERR_INI_SIZE:
# De foto is groter dan toegestaan in php.ini Dit is standaard 16 mb.
$Bericht[] = 'De foto is te groot.';
break;
case UPLOAD_ERR_PARTIAL:
# De foto is maar gedeeltelijk geupload. Variable $Bericht weer vullen met een foutmelding.
$Bericht[] = 'Er is een fout opgetreden tijdens het uploaden';
break;
case UPLOAD_ERR_NO_FILE:
# Er is geen bestand opgegeven om te uploaden. Array weer vullen.
$Bericht[] = 'U heeft geen foto opgegeven om te uploaden';
break;
default:
# Vanget: Er zou eigenlijk geen onbekende fout mogen optreden maar het is toch goed om hier een voorziening voor te treffen
$Bericht[] = 'Er is een onbekende fout opgetreden';
break;
} # Het einde van de switch statement.
if (empty($Bericht))
{
# Het uploaden is goedgegaan, want de array Bericht is nog leeg. (empty)
# We gaan u de extensie van de file controleren en kijken of hij is toegestaan. (Bovenin de file staan de toegestane extensie's weet je nog?)
if (!in_array($Foto['type'], $FotoMIME ))
{
# De MIME type die is opgegeven is niet toegestaan, de array bericht weer vullen met een andere foutmelding.
$Bericht[] = 'Deze extensie is niet toegestaan!';
}
# Extensie controleren
if(!in_array(strtolower(strrchr($_FILES['foto']['name'], '.')), $FotoExt))
{
$Bericht[] = ' Deze foto extentie is niet toegestaan';
}
# We gaan nu controleren of er al een foto bestaat met deze naam.
$FotoNaam = $UploadMap . $Foto['name'];
if (file_exists($FotoNaam))
{
# De naam van de foto bestaat dus al. Het mag natuurlijk niet voorkomen dat file's worden overgeschreven. Dat zou zonde zijn.
# De array weer vullen met een andere foutmelding. Natuurlijk mag je die helemaal aanpassen naar wat jij wilt!
$Bericht[] = 'Er bestaat al een foto met deze naam!';
}
?>
Even een tussenpauze en een kleine bespreking van wat we nu al gedaan hebben. In de commentaarregels wat aangegeven staat met een # kun je lezen wat er elke keer gedaan wordt. Ook heb ik gekozen om de foutmeldingen op te slaan in een array. Dit omdat je dan laten de foutmeldingen weer kan geven waar je maar wilt.
Wat ons nu nog rest
Even op een rijtje wat we nu nog moeten doen.
- De overige formulier velden valideren
- De afbeelding verplaatsen naar de definitieve map
- Database verwijzing maken (Vandaar de tabel photos)
- Thumbnail van de foto maken
- Upload pagina testen
We lopen het rijtje af. Wat we eerst moeten doen is het valideren van de formulier velden. Ik ga niet alles voorkauwen dus laat ik jouw ook even wat programmeren. Eigenlijk is het heel gemakkelijk. Eerst controleer je of er geen fouten zijn opgetreden zoals we hierboven al een keer gedaan hebben. En daarna kijken je of er bij naam wat ingevuld is. Dit kan je het zelf doen als bij het controleren van de foutenmeldingen. Dus je gebruikt de functie empty. Als je dat gedaan hebt komt weer iets moeilijks.We moeten het e-mail veld controleren. Dit wordt gedaan met een reguliere expressie. Omdat dit een tutorial is vind ik dat je zelf ook wel wat mag doen. Maar ik zal wel wat verklappen en een klein stukje code geven.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?php
if (check_email($_POST[email]))
{
# hier vul je variable bericht weer.
}
?>
if (check_email($_POST[email]))
{
# hier vul je variable bericht weer.
}
?>
Je roept dus een functie check_email aan. Je hoeft hem nu nog niet te maken. Later definieer je hem in het function bestand. Kijk ook eens op preg_match
Nu komt het verplaatsen van de foto naar de definitieve map. We controleren weer eerst of er geen fouten zijn opgetreden. (Mag je zelf doen) En daarna gebruiken we de volgende functie.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<?php
if (!move_uploaded_file ($Foto['tmp_name'] , $FotoNaam))
{
# vul hier weer de array bericht met een melding dat de foto niet opgeslagen kon worden.
}
?>
if (!move_uploaded_file ($Foto['tmp_name'] , $FotoNaam))
{
# vul hier weer de array bericht met een melding dat de foto niet opgeslagen kon worden.
}
?>
Als we weer naar het lijstje kijken zien we dat het nu de tijd is om een verwijzing naar de database te gaan maken. In de database stoppen we de volgende dingen
- Naam
- Foto filename
- Trefwoorden
- Datum
- Beschrijving
- IPadres
- Systeem info
Controleer eerst weer of er geen fouten zijn opgetreden, en daarna maken we deze query.
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
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
<?php
$Query_insert_photo =
"
INSERT INTO
photos
(
naam,
email,
photo_filename,
trefwoorden,
datum,
beschrijving,
ip,
sys_info
)
VALUES
(
'" .$Mysqli->real_escape_string ($_POST['naam']). "',
'" .$Mysqli->real_escape_string ($_POST['email']). "',
'" .$Mysqli->real_escape_string ($_FILES['foto']['name']). "',
'" .$Mysqli->real_escape_string ($_POST['trefwoorden']). "',
NOW(),
'" .$Mysqli->real_escape_string ($_POST['beschrijving']). "',
'" .$Mysqli->real_escape_string ($_SERVER['REMOTE_ADDR']). "',
'" .$Mysqli->real_escape_string ($_SERVER['HTTP_USER_AGENT']). "'
)
";
?>
$Query_insert_photo =
"
INSERT INTO
photos
(
naam,
email,
photo_filename,
trefwoorden,
datum,
beschrijving,
ip,
sys_info
)
VALUES
(
'" .$Mysqli->real_escape_string ($_POST['naam']). "',
'" .$Mysqli->real_escape_string ($_POST['email']). "',
'" .$Mysqli->real_escape_string ($_FILES['foto']['name']). "',
'" .$Mysqli->real_escape_string ($_POST['trefwoorden']). "',
NOW(),
'" .$Mysqli->real_escape_string ($_POST['beschrijving']). "',
'" .$Mysqli->real_escape_string ($_SERVER['REMOTE_ADDR']). "',
'" .$Mysqli->real_escape_string ($_SERVER['HTTP_USER_AGENT']). "'
)
";
?>
Zoals ik in het stukje van de configuratie pagina heb gezegt dat we de variablen $Mysqli zullen gebruiken zien jullie hem nu hier. Hij wordt gebruik voor het beveiligen van de query tegen SQL injection en straks voor het uitvoeren van de query. Waarom? Als je mysqli gebruikt is het verplicht om 2 parameters op te geven. 1 voor de database. En de andere voor het geen wat in je database schrijft. Bijvoorbeeld $_POST[‘voorbeeld’]. Nu is hij tijd om de query uit te gaan voeren. Dit doen we doormiddel van een if statement zodat we gelijk kunnen controleren of er fouten zijn opgetreden bij het wegschrijven van de foto.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?php
if (!$Mysqli->query ($Query_insert_photo) )
{
$Bericht[] = 'Er is een fout getreden met het opslaan van de foto in de database '. $Mysqli->error;
}
?>
if (!$Mysqli->query ($Query_insert_photo) )
{
$Bericht[] = 'Er is een fout getreden met het opslaan van de foto in de database '. $Mysqli->error;
}
?>
Daarna maken wij een else aan waar we de thumbnail gaan maken. Omdat dit nogal moeilijk is zal ik alle code gewoon geven en daar commentaar bij neerzetten. Probeer het wel te snappen.
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<?php
else
{
# eigenschappen van de foto achterhalen
list ($Breedte, $Hoogte, $ImageType) = getimagesize ($FotoNaam);
# bepaald de verhouding tussen hoogte en breedte
$ImageRatio = $Breedte / $Hoogte;
# bereken op basis van de ratio de nieuwe hoogte
if ($ImageRatio > 1)
{
$TnBreedte = $ThumbSize;
$TnHoogte = $ThumbSize / $ImageRatio;
}
else
{
$TnHoogte = $ThumbSize;
$TnBreedte = $ThumbSize * $ImageRatio;
}
# Lege thumbnail in het geheuge schrijven
$Thumb = imagecreatetruecolor ($TnBreedte, $TnHoogte);
# Afhankelijk van het type een thumbnail maken
switch ($ImageType)
{
case IMAGETYPE_GIF:
$Source = imagecreatefromgif ($FotoNaam);
break;
case IMAGETYPE_JPEG:
$Source = imagecreatefromjpeg ($FotoNaam);
break;
case IMAGETYPE_PNG:
$Source = imagecreatefrompng ($FotoNaam);
break;
default:
$Source = imagecreatefromgif ($FotoNaam);
break;
}
# De foto verkleinen en kopiëren naar de thumbnail
imagecopyresampled ($Thumb, $Source, 0, 0, 0, 0, $TnBreedte, $TnHoogte, $Breedte, $Hoogte);
# Naam van de thumbnail samenstellen
$Thumbname = $UploadMap . 'thumbnails/' . 'tn_' . $_FILES['foto']['name'];
# tot slot de thumbnail opslaan opnieuw afhankelijk van het type
switch ($ImageType)
{
case IMAGETYPE_GIF:
imagegif ($Thumb, $Thumbname);
break;
case IMAGETYPE_JPEG:
imagejpeg ($Thumb, $Thumbname, 100);
break;
case IMAGETYPE_PNG:
imagepng ($Thumb, $Thumbname);
break;
}
$Bericht[] = 'Uw foto is succesvol opgeslagen in het fotoalbum!';
}
?>
else
{
# eigenschappen van de foto achterhalen
list ($Breedte, $Hoogte, $ImageType) = getimagesize ($FotoNaam);
# bepaald de verhouding tussen hoogte en breedte
$ImageRatio = $Breedte / $Hoogte;
# bereken op basis van de ratio de nieuwe hoogte
if ($ImageRatio > 1)
{
$TnBreedte = $ThumbSize;
$TnHoogte = $ThumbSize / $ImageRatio;
}
else
{
$TnHoogte = $ThumbSize;
$TnBreedte = $ThumbSize * $ImageRatio;
}
# Lege thumbnail in het geheuge schrijven
$Thumb = imagecreatetruecolor ($TnBreedte, $TnHoogte);
# Afhankelijk van het type een thumbnail maken
switch ($ImageType)
{
case IMAGETYPE_GIF:
$Source = imagecreatefromgif ($FotoNaam);
break;
case IMAGETYPE_JPEG:
$Source = imagecreatefromjpeg ($FotoNaam);
break;
case IMAGETYPE_PNG:
$Source = imagecreatefrompng ($FotoNaam);
break;
default:
$Source = imagecreatefromgif ($FotoNaam);
break;
}
# De foto verkleinen en kopiëren naar de thumbnail
imagecopyresampled ($Thumb, $Source, 0, 0, 0, 0, $TnBreedte, $TnHoogte, $Breedte, $Hoogte);
# Naam van de thumbnail samenstellen
$Thumbname = $UploadMap . 'thumbnails/' . 'tn_' . $_FILES['foto']['name'];
# tot slot de thumbnail opslaan opnieuw afhankelijk van het type
switch ($ImageType)
{
case IMAGETYPE_GIF:
imagegif ($Thumb, $Thumbname);
break;
case IMAGETYPE_JPEG:
imagejpeg ($Thumb, $Thumbname, 100);
break;
case IMAGETYPE_PNG:
imagepng ($Thumb, $Thumbname);
break;
}
$Bericht[] = 'Uw foto is succesvol opgeslagen in het fotoalbum!';
}
?>
Nu moeten wij nog alle statement afsluiten. Probeer er zelf achter te komen hoeveel je er moet afsluiten. Lukt dit niet gebruik er dan 4. xD Daarna mag je php afsluiten en het formulier er onderzetten.
« vorige pagina | volgende pagina »
Inhoudsopgave
- Inleiding
- Index pagina
- Benodigd heden
- Upload pagina
- Configuratie bestand
- Uploaden (PHP)
- Afronden uploaden
- Slot