Uploaden van meerdere afbeeldingen
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 ----
Gewijzigd op 13/06/2012 10:13:21 door Marco ----
Code (php)
1
<input type="file" name="img[]" multiple="multiple" />
Gewijzigd op 13/06/2012 14:05:50 door gerhard l
Gerhard l op 13/06/2012 10:40:15:
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 ;)
Code (php)
1
<input type="file" name="img" multiple="multiple" />
Moet je dan niet zorgen dat img een array is?
Code (php)
1
<input type="file" name="img[]" multiple="multiple" />
[/quote]
Anders paktie er nog steeds maar 1 toch?