Ajax / PHP Image Upload
Ik heb op het internet onderstaand script gevonden om afbeeldingen te uploaden naar de server. Werkt allemaal prima. Dus alle eer naar de maker !
Er wordt vanuit de index.php een script aangeroepen welke de afbeelding renamed, upload enz. De afbeelding wordt vervolgens in een DIV getoond op de index pagina.
Hieronder de code van index.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
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
<html>
<head>
<title>Ajax Image Upload</title>
</head>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$('#photoimg').live('change', function() {
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({
target: '#preview'
}).submit();
});
});
</script>
<body>
<div style="width:600px">
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'> Afbeelding <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'>
</div>
</div>
</body>
</html>
<head>
<title>Ajax Image Upload</title>
</head>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$('#photoimg').live('change', function() {
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({
target: '#preview'
}).submit();
});
});
</script>
<body>
<div style="width:600px">
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'> Afbeelding <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'>
</div>
</div>
</body>
</html>
Hieronder de inhoud van ‘ajaximage.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
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
<?php
$path = pics/";
$valid_formats = array("jpg", "png", "gif", "bmp", "jpeg", "JPG", "PNG", "GIF", "BMP", "JPEG");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name)) {
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats)) {
if($size<(1024*1024)) {
$actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name)) {
echo "<img src='pics/".$actual_image_name."' class='preview'>";
}
else
echo "Er is iets niet goed gegaan. Probeer het opnieuw.";
}
else
echo "Afbeelding mag maximaal 1 Mb groot zijn !";
}
else
echo "Ongeldig formaat ..";
}
}
}
?>
$path = pics/";
$valid_formats = array("jpg", "png", "gif", "bmp", "jpeg", "JPG", "PNG", "GIF", "BMP", "JPEG");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name)) {
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats)) {
if($size<(1024*1024)) {
$actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name)) {
echo "<img src='pics/".$actual_image_name."' class='preview'>";
}
else
echo "Er is iets niet goed gegaan. Probeer het opnieuw.";
}
else
echo "Afbeelding mag maximaal 1 Mb groot zijn !";
}
else
echo "Ongeldig formaat ..";
}
}
}
?>
Mijn vraag is hoe ik de waarde van $actual_image_name terugsturen naar de index.php vanuit
ajaximage.php ?
Ik heb deze waarde nodig om het in de database te schrijven.
Alvast bedankt voor de reactie(s).
Bedankt voor je reactie, maar ik wil dit integreren in een andere form waar nog meer informatie verzameld wordt welke ook in de Db geschreven moeten worden...
index.php?ain='. $actual_image_name;
kijk ook even naar de kleurtjes:)
Toevoeging op 26/08/2011 14:36:04:
of zoals jacco zegt met sessies
Code (php)
1
$_SESSION['ain'] = $actual_image_name;
Waar zet ik dat neer dan ?
In feite verlaat ik de index.php niet als ik de upload doe in de browser, toch ?