Upload + preview image
Ik heb nu een form + image upload script ( image upload script heb ik niet zelf gemaakt maar online gevonden :p )
Het werkt allemaal perfect form slaat info op in de database, je klikt op een knopje en je kan een image kiezen voor te uploaden.
Ik wil nu eigenlijk als je een image hebt gekozen dat er dan een preview komt dus tot je op de pagina ziet welke image je hebt gekozen.
Ik heb zitten zoeken hoe het moest, het kwam erop neer dat het met javascript moet maar ik weet erg weinig van javascript.
Hoe zou ik dit kunnen bereiken?
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
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
<?php
error_reporting(E_ALL);
ini_set('memory_limit', '64M');
if(isset($_POST['submit'])){
$bestand = $_FILES['bestand']['tmp_name'];
$bestandinfo = explode('.',$_FILES['bestand']['name']);
$bestandsnaam = str_replace(" ", "_", $bestandinfo[0]);
//$extensie = $bestandinfo[1];
$timestamp = date("His");
$size = getimagesize($bestand); //Gegevens van afbeelding ophalen
//Afmetingen berekenen
$origional_width = $size[0]; //Orginele breedte in variabele zetten
$origional_height = $size[1]; //Orginele hoogte in variabele zetten
//Loop beginnen
for($i=0; $i < 2; $i++){
if($size[2] == "1"){ //Als het een GIF is:
die ("<div id='uploaderrordiv'><b>Dit bestandstype word niet ondersteunt</b></div>");
}elseif($size[2] == "2"){ //Als het een JPG is:
$img = imagecreatefromjpeg($bestand);
}elseif($size[2] == "3"){ //Als het een PNG is:
$img = imagecreatefrompng($bestand);
}elseif($size[2] == "6"){ //Als het een BMP is:
die("<div id='uploaderrordiv'><b>Zet het plaatje alstublieft om naar PNG of JPEG formaat om de serverbelasting te minimaliseren</b></div>");
}else{
die("<div id='uploaderrordiv'><b>Het bestandstype werd niet herkend.</b></div>");
}
//////////////////////
/////INSTELLINGEN/////
//////////////////////
//Thumbnail eigenschappen
if($i == 0){
$max_height = $origional_height; //Maximale hoogte instellen
$max_width = $origional_width; //Maximale breedte instellen
$thumb_pad = "images/test/thumbnails/"; //Pad waar kleine thumbnail moet komen te staan
$dest = $thumb_pad . $bestandsnaam . ".png";
//Grotere versie eigenschappen
}else{
$max_height = $origional_height; //Maximale hoogte instellen
$max_width = $origional_width; //Maximale breedte instellen
$thumb_pad = "images/test/images/"; //Pad waar grote thumbnail moet komen te staan
$dest = $thumb_pad . $bestandsnaam . ".png";
}
if ( $origional_height > $max_height OR $origional_width > $max_width){ //Als het orgineel groter is als maximale
if($origional_height > $origional_width){ //Als de hoogte de langste kant is:
$thumb_height = $max_height;
$ratio = $origional_height / $max_height;
$thumb_width = ceil($origional_width / $ratio);
}elseif($origional_height < $origional_width){ //Anders, als de breedte de langste kant is:
$thumb_width = $max_width;
$ratio = $origional_width / $max_width;
$thumb_height = ceil($origional_height / $ratio);
}elseif($origional_height == $origional_width){ //orginele hoogte en breedte zijn gelijk, dus is afbeelding een vierkant:
$thumb_height = $max_height;
$thumb_width = $max_width;
}
}else{ //Orgineel is kleiner dus orginele afmeting gebruiken, vergroten is niet mooi.
$thumb_height = $origional_height;
$thumb_width = $origional_width;
}
$img_n=imagecreatetruecolor ($thumb_width, $thumb_height);
imagecopyresampled($img_n, $img, 0, 0, 0, 0, $thumb_width, $thumb_height, $origional_width, $origional_height);
imagejpeg($img_n,$dest,80);
//imagepng($img_n, $dest);
ImageDestroy($img_n);
ImageDestroy($img);
//Einde loop
}
echo "<div id=succes>";
echo "Afbeelding succesvol geplaatst.";
echo "</div>";
}else{
echo "<form class=test222 action=" . $_SERVER['PHP_SELF'] . " method=\"POST\" enctype=\"multipart/form-data\">";
echo "<input type=\"hidden\" name=\"MAX_FILE_SIZE\" value=\"3200000000000\">";
echo "<input type=\"file\" name=\"bestand\"><br>";
*** hier stond een form maar dat heb ik er ff tussen uit gehaald scheelt spam code :p***
echo "<div id=submitbuttonart>";
echo "<input type=image src=images/cms/upload.png name=submit>";
echo "</div>";
echo "<div id=previewart>";
echo "</div>";
echo "<div id=previewart2>";
echo " <img src=images/cms/upload/preview.png>";
echo "</div>";
echo "</form>";
}
?>
error_reporting(E_ALL);
ini_set('memory_limit', '64M');
if(isset($_POST['submit'])){
$bestand = $_FILES['bestand']['tmp_name'];
$bestandinfo = explode('.',$_FILES['bestand']['name']);
$bestandsnaam = str_replace(" ", "_", $bestandinfo[0]);
//$extensie = $bestandinfo[1];
$timestamp = date("His");
$size = getimagesize($bestand); //Gegevens van afbeelding ophalen
//Afmetingen berekenen
$origional_width = $size[0]; //Orginele breedte in variabele zetten
$origional_height = $size[1]; //Orginele hoogte in variabele zetten
//Loop beginnen
for($i=0; $i < 2; $i++){
if($size[2] == "1"){ //Als het een GIF is:
die ("<div id='uploaderrordiv'><b>Dit bestandstype word niet ondersteunt</b></div>");
}elseif($size[2] == "2"){ //Als het een JPG is:
$img = imagecreatefromjpeg($bestand);
}elseif($size[2] == "3"){ //Als het een PNG is:
$img = imagecreatefrompng($bestand);
}elseif($size[2] == "6"){ //Als het een BMP is:
die("<div id='uploaderrordiv'><b>Zet het plaatje alstublieft om naar PNG of JPEG formaat om de serverbelasting te minimaliseren</b></div>");
}else{
die("<div id='uploaderrordiv'><b>Het bestandstype werd niet herkend.</b></div>");
}
//////////////////////
/////INSTELLINGEN/////
//////////////////////
//Thumbnail eigenschappen
if($i == 0){
$max_height = $origional_height; //Maximale hoogte instellen
$max_width = $origional_width; //Maximale breedte instellen
$thumb_pad = "images/test/thumbnails/"; //Pad waar kleine thumbnail moet komen te staan
$dest = $thumb_pad . $bestandsnaam . ".png";
//Grotere versie eigenschappen
}else{
$max_height = $origional_height; //Maximale hoogte instellen
$max_width = $origional_width; //Maximale breedte instellen
$thumb_pad = "images/test/images/"; //Pad waar grote thumbnail moet komen te staan
$dest = $thumb_pad . $bestandsnaam . ".png";
}
if ( $origional_height > $max_height OR $origional_width > $max_width){ //Als het orgineel groter is als maximale
if($origional_height > $origional_width){ //Als de hoogte de langste kant is:
$thumb_height = $max_height;
$ratio = $origional_height / $max_height;
$thumb_width = ceil($origional_width / $ratio);
}elseif($origional_height < $origional_width){ //Anders, als de breedte de langste kant is:
$thumb_width = $max_width;
$ratio = $origional_width / $max_width;
$thumb_height = ceil($origional_height / $ratio);
}elseif($origional_height == $origional_width){ //orginele hoogte en breedte zijn gelijk, dus is afbeelding een vierkant:
$thumb_height = $max_height;
$thumb_width = $max_width;
}
}else{ //Orgineel is kleiner dus orginele afmeting gebruiken, vergroten is niet mooi.
$thumb_height = $origional_height;
$thumb_width = $origional_width;
}
$img_n=imagecreatetruecolor ($thumb_width, $thumb_height);
imagecopyresampled($img_n, $img, 0, 0, 0, 0, $thumb_width, $thumb_height, $origional_width, $origional_height);
imagejpeg($img_n,$dest,80);
//imagepng($img_n, $dest);
ImageDestroy($img_n);
ImageDestroy($img);
//Einde loop
}
echo "<div id=succes>";
echo "Afbeelding succesvol geplaatst.";
echo "</div>";
}else{
echo "<form class=test222 action=" . $_SERVER['PHP_SELF'] . " method=\"POST\" enctype=\"multipart/form-data\">";
echo "<input type=\"hidden\" name=\"MAX_FILE_SIZE\" value=\"3200000000000\">";
echo "<input type=\"file\" name=\"bestand\"><br>";
*** hier stond een form maar dat heb ik er ff tussen uit gehaald scheelt spam code :p***
echo "<div id=submitbuttonart>";
echo "<input type=image src=images/cms/upload.png name=submit>";
echo "</div>";
echo "<div id=previewart>";
echo "</div>";
echo "<div id=previewart2>";
echo " <img src=images/cms/upload/preview.png>";
echo "</div>";
echo "</form>";
}
?>