Uploaden van meerdere afbeeldingen
Hallo allemaal,
Graag zou ik middels een array afbeeldingen willen uploaden. Bij één afbeelding (afbeelding + thumbnail) is het geen probleem. Het wordt wel een beetje lastig met meerdere afbeeldingen. Ik heb al geprobeerd om het uploadscript in een while loop te zetten en namen uit te lezen als: $_FILES["afbeelding[".$i."]"]["name"]). Helaas zonder resultaat. Kan iemand mij vertellen hoe ik dit het beste kan doen?
artikel_toevoegen.php
artikel_opslaan.php
Graag zou ik middels een array afbeeldingen willen uploaden. Bij één afbeelding (afbeelding + thumbnail) is het geen probleem. Het wordt wel een beetje lastig met meerdere afbeeldingen. Ik heb al geprobeerd om het uploadscript in een while loop te zetten en namen uit te lezen als: $_FILES["afbeelding[".$i."]"]["name"]). Helaas zonder resultaat. Kan iemand mij vertellen hoe ik dit het beste kan doen?
artikel_toevoegen.php
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script language="javascript">
var teller = 0;
function nieuwBestand(veldnaam)
{
teller++;
var parent = document.getElementById(veldnaam);
var child = document.createElement('div');
child.setAttribute('id', teller);
child.setAttribute('name', teller);
child.innerHTML = '<input type="button" onclick="verwijderVeld(\'' + teller + '\',\''+veldnaam+'\')" value="X" /><label for="'+veldnaam+'['+teller+']">'+veldnaam+'</label><input type="file" id="'+veldnaam+'['+teller+']" name="'+veldnaam+'['+teller+']" /><br />'
parent.appendChild(child);
}
</script>
<html>
<div class="labels">Bestanden uploaden</div><br />
<div id="Afbeelding">
<label for="afbeelding"><a href="javascript:nieuwBestand('Afbeelding')">[+]</a> Afbeelding</label>
<input type="file" name="afbeelding[0]" id="afbeelding" <?=$width?>>
</div><br />
</html>
var teller = 0;
function nieuwBestand(veldnaam)
{
teller++;
var parent = document.getElementById(veldnaam);
var child = document.createElement('div');
child.setAttribute('id', teller);
child.setAttribute('name', teller);
child.innerHTML = '<input type="button" onclick="verwijderVeld(\'' + teller + '\',\''+veldnaam+'\')" value="X" /><label for="'+veldnaam+'['+teller+']">'+veldnaam+'</label><input type="file" id="'+veldnaam+'['+teller+']" name="'+veldnaam+'['+teller+']" /><br />'
parent.appendChild(child);
}
</script>
<html>
<div class="labels">Bestanden uploaden</div><br />
<div id="Afbeelding">
<label for="afbeelding"><a href="javascript:nieuwBestand('Afbeelding')">[+]</a> Afbeelding</label>
<input type="file" name="afbeelding[0]" id="afbeelding" <?=$width?>>
</div><br />
</html>
artikel_opslaan.php
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
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
<?php
if ($_FILES["afbeelding[0]"]["error"] > 0)
{
echo "Error: " . $_FILES["Afbeelding[0]"]["error"] . "<br />";
}
else
{
//DE GROTE AFBEELDING WORDT VERKLEIND NAAR MAX 350PX BREED OF HOOG
$artikelid = 8;
$ext_tmp = explode(".", $_FILES["afbeelding"]["name"]);
$ext = ".".$ext_tmp[1];
$max_upload_width = 350;
$max_upload_height = 350;
$filedir = "../../artikelen/afbeeldingen/";
list($image_width, $image_height) = getimagesize($_FILES["afbeelding"]["tmp_name"]);
if($image_width > $max_upload_width || $image_height > $max_upload_height)
{
$proportions = $image_width / $image_height;
if($image_width > $image_height)
{
$new_width = $max_upload_width;
$new_height = round($max_upload_width / $proportions);
}
else
{
$new_height = $max_upload_height;
$new_width = round($max_upload_height*$proportions);
}
$new_image = imagecreatetruecolor($new_width,$new_height);
$image_source = imagecreatefromjpeg($_FILES["afbeelding"]["tmp_name"]);
imagecopyresampled($new_image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height);
imagejpeg($new_image, $_FILES['afbeelding']['tmp_name'], 75);
move_uploaded_file($_FILES["afbeelding"]["tmp_name"], $filedir.$artikelid.$ext);
}
//DE THUMBNAIL WORDT VERKLEIND NAAR MAX 150PX BREED OF HOOG
$max_upload_width_thumb = 150;
$max_upload_height_thumb = 150;
$filedir_thumb = "../../artikelen/afbeeldingen/thumbnails/";
copy($filedir.$artikelid.$ext, $filedir_thumb.$artikelid.$ext) or die ("Afbeelding kon niet worden gekopieerd");
list($thumb_width, $thumb_height) = getimagesize($filedir_thumb.$artikelid.$ext);
if($thumb_width > $max_upload_width_thumb || $thumb_height > $max_upload_height_thumb)
{
$proportions = $thumb_width / $thumb_height;
if($thumb_width > $thumb_height)
{
$new_width_thumb = $max_upload_width_thumb;
$new_height_thumb = round($max_upload_width_thumb / $proportions);
}
else
{
$new_height_thumb = $max_upload_height;
$new_width_thumb = round($max_upload_height_thumb*$proportions);
}
$new_image_thumb = imagecreatetruecolor($new_width_thumb,$new_height_thumb);
echo $new_image_thumb;
$image_source_thumb = imagecreatefromjpeg($filedir_thumb.$artikelid.$ext);
imagecopyresampled($new_image_thumb, $image_source_thumb, 0, 0, 0, 0, $new_width_thumb, $new_height_thumb, $thumb_width, $thumb_height);
imagejpeg($new_image_thumb, $filedir_thumb.$artikelid.$ext, 75);
}
}
?>
if ($_FILES["afbeelding[0]"]["error"] > 0)
{
echo "Error: " . $_FILES["Afbeelding[0]"]["error"] . "<br />";
}
else
{
//DE GROTE AFBEELDING WORDT VERKLEIND NAAR MAX 350PX BREED OF HOOG
$artikelid = 8;
$ext_tmp = explode(".", $_FILES["afbeelding"]["name"]);
$ext = ".".$ext_tmp[1];
$max_upload_width = 350;
$max_upload_height = 350;
$filedir = "../../artikelen/afbeeldingen/";
list($image_width, $image_height) = getimagesize($_FILES["afbeelding"]["tmp_name"]);
if($image_width > $max_upload_width || $image_height > $max_upload_height)
{
$proportions = $image_width / $image_height;
if($image_width > $image_height)
{
$new_width = $max_upload_width;
$new_height = round($max_upload_width / $proportions);
}
else
{
$new_height = $max_upload_height;
$new_width = round($max_upload_height*$proportions);
}
$new_image = imagecreatetruecolor($new_width,$new_height);
$image_source = imagecreatefromjpeg($_FILES["afbeelding"]["tmp_name"]);
imagecopyresampled($new_image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height);
imagejpeg($new_image, $_FILES['afbeelding']['tmp_name'], 75);
move_uploaded_file($_FILES["afbeelding"]["tmp_name"], $filedir.$artikelid.$ext);
}
//DE THUMBNAIL WORDT VERKLEIND NAAR MAX 150PX BREED OF HOOG
$max_upload_width_thumb = 150;
$max_upload_height_thumb = 150;
$filedir_thumb = "../../artikelen/afbeeldingen/thumbnails/";
copy($filedir.$artikelid.$ext, $filedir_thumb.$artikelid.$ext) or die ("Afbeelding kon niet worden gekopieerd");
list($thumb_width, $thumb_height) = getimagesize($filedir_thumb.$artikelid.$ext);
if($thumb_width > $max_upload_width_thumb || $thumb_height > $max_upload_height_thumb)
{
$proportions = $thumb_width / $thumb_height;
if($thumb_width > $thumb_height)
{
$new_width_thumb = $max_upload_width_thumb;
$new_height_thumb = round($max_upload_width_thumb / $proportions);
}
else
{
$new_height_thumb = $max_upload_height;
$new_width_thumb = round($max_upload_height_thumb*$proportions);
}
$new_image_thumb = imagecreatetruecolor($new_width_thumb,$new_height_thumb);
echo $new_image_thumb;
$image_source_thumb = imagecreatefromjpeg($filedir_thumb.$artikelid.$ext);
imagecopyresampled($new_image_thumb, $image_source_thumb, 0, 0, 0, 0, $new_width_thumb, $new_height_thumb, $thumb_width, $thumb_height);
imagejpeg($new_image_thumb, $filedir_thumb.$artikelid.$ext, 75);
}
}
?>
Gewijzigd op 02/06/2012 15:43:55 door Marco ----
kijk ook hier eens naar:
http://php.net/manual/en/features.file-upload.multiple.php
http://php.net/manual/en/features.file-upload.multiple.php
Bedankt voor jullie input. De oplossing is gevonden in javascript en html. Ik gebruikte de veldnaam om als naam aan het volgende file input veld mee te geven en om voor het veld te zetten om duidelijk te maken dat het gaat om uploaden van afbeeldingen. NieuwBestand('Afbeelding') heb ik veranderd naar kleine letter. Anders had het eerste veld de naam 'afbeelding' en de daarop volgende 'Afbeelding'.
Gewijzigd op 13/06/2012 10:13:21 door Marco ----
Fijn dat het opgelost is. Nog 1 tip als je html 5 gebruikt kan je gewoon multiple toevoegen aan je input, dit werkt waarschijnlijk nog niet in IE ;)
Gewijzigd op 13/06/2012 14:05:50 door gerhard l
Bedankt Gerhard, ik zal er later nog eens naar kijken. Op deze manier werkt het nu in ieder geval. Op dit moment heb ik weer even andere prioriteiten ;-)
Gerhard l op 13/06/2012 10:40:15:
Moet je dan niet zorgen dat img een array is?
[/quote]
Anders paktie er nog steeds maar 1 toch?
@Patrick, helemaal gelijk ben ik vergeten!




