Uploading Image one by one - php

Question

hi guys I have codes here that allow you to choose image and preview it right away. But i have problem when choosing an image in one by one because when I go to the next page I just get only the last image that I selected. How can I save all the images that selected one by one in an array and pass it to the next page. Its working when you are selecting multiple images in once but then in one by one it just get the last image.
<div id='upload' style="margin-left:5px;border-radius:5pt;background:#fff;width:710px;height:230px;color:white;font-size:11pt;font-weight:bolder">
<div id="list" style="float:left;width:700px;height:auto"></div>
</div>
<div style='margin-top:15px;margin-left:20px;float:left;width:700px;'>
<form method="post" action="index.php?pg=preview" enctype="multipart/form-data">
<input type="file" id="files" name="files[]" multiple />
<input id="but" type="submit" name="cancel" value="Cancel" onclick="history.go(-1)"style="margin-left:225px" ></input>
<input id="but" type="submit" name="next" value="Next"></input>
</form>
</div>
</div>
<script>
function check()
{
$("#show").show();
$("#show").load('check_image.php');
}
var x = 0;
var y = 0;
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
var name = files.item(0).name;
//alert(name);
if(x > 9)
{
alert('Total of 10 Images are acceptable');
}
else
{
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<div id="image"><img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/></div>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
y = i + x;
x = 0 + y;
i = 0;
}
document.getElementById('files').addEventListener('change', handleFileSelect, true);
</script>
<?php
$photo[] = '';
for($i=0; $i<count($_FILES['files']['name']); $i++)
{
if(isset($_FILES["files"]["name"]))
{
if ((($_FILES["files"]["type"][$i] == "image/gif")||
($_FILES["files"]["type"][$i] == "image/jpeg")||
($_FILES["files"]["type"][$i] == "image/jpg")||
($_FILES["files"]["type"][$i] == "image/png")||
($_FILES["files"]["type"][$i] == "image/pjpeg"))&&($_FILES["files"]["size"][$i] < 10000000))
{
if ($_FILES["files"]["error"][$i] > $i)
{
echo "Error: ".$_FILES["files"]["error"][$i]."<br />";
}
else
{
move_uploaded_file($_FILES["files"]["tmp_name"][$i],"pics/".$_FILES["files"]["name"][$i]);
$photo[$i] = "pics/".$_FILES["files"]["name"][$i];
}
}
else
{
$photo[$i]="";
}
}
}
?>

Answer 1

You can modify your code like this:
<form method="post" action="index.php?pg=preview" enctype="multipart/form-data">
$picture_count = 10;
for($i = 0; $i<10;++$i){?>
<input type="file" id="files" name="files[]" 0) echo 'style="display:none;"'?>/>
<input id="but" type="submit" name="cancel" value="Cancel" onclick="history.go(-1)"style="margin-left:225px" ></input>
<input id="but" type="submit" name="next" value="Next"></input>
</form>
<script>
function check() {
$("#show").show();
$("#show").load('check_image.php');
}
var x = 0;
var y = 0;
var j = 0;
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) { </p>
var name = files.item(0).name;
//alert(name);
if(x > <?php echo $picture_count-1;?>)
{
alert('Total of 10 Images are acceptable');
} </p>
else
{
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<div id="image"><img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/></div>'].join('');
document.getElementById('list').insertBefore(span, null);
document.getElementById('files'+j).style.display = 'none';
document.getElementById('files'+(++j)).style.display = 'block';
};
})(f); </p>
// Read in the image file as a data URL.
reader.readAsDataURL(f);</p>
}
}
y = i + x;
x = 0 + y;
i = 0;
}
document.getElementById('files').addEventListener('change', handleFileSelect, true);
</script>
This code will upload all allowed files to the server.
$picture_count - the maximum count of images for upload.
But, I would advise you to use scripts like jquery.uploadify, it is handier and works with many browsers