Php 逐个上传图像

嗨，伙计们，我这里有代码，允许你们选择图像并立即预览它。但是我在一张一张地选择一张图片时遇到了问题，因为当我进入下一页时，我只得到了我选择的最后一张图片。如何将选择的所有图像逐个保存在一个数组中，并将其传递到下一页。当您一次选择多个图像时，它会起作用，但在一个接一个中，它只会得到最后一个图像

 <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]="";
    }
}

}
?>

函数检查（）
{
$（“#show”）.show（）；
$（“#show”）.load（'check#image.php'）；
}
var x=0；
var y=0；
功能手柄文件选择（evt）{
var files=evt.target.files；//文件列表对象
//循环浏览文件列表并将图像文件渲染为缩略图。
for（var i=0，f；f=files[i]；i++）{
var name=files.item（0）.name；
//警报（名称）；
如果（x>9）
{
警报（“总共可接受10张图像”）；
}
其他的
{
//仅处理图像文件。
如果（！f.type.match（'image.*'））{
继续；
}
var reader=new FileReader（）；
//闭包以捕获文件信息。
reader.onload=（函数（文件）{
返回函数（e）{
//渲染缩略图。
var span=document.createElement（'span'）；
span.innerHTML=[''）.join（''）；
document.getElementById（'list'）.insertBefore（span，null）；
};
})（f） )；
//作为数据URL读入图像文件。
reader.readAsDataURL（f）；
}
}
y=i+x；
x=0+y；
i=0；
}   
document.getElementById（'files'）.addEventListener（'change'，handleFileSelect，true）；

您可以这样修改代码：

<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;"'?>/>

}

document.getElementById（'files'）.addEventListener（'change'，handleFileSelect，true）；

此代码将所有允许的文件上载到服务器

$picture\u count-上载图像的最大计数

但是，我建议您使用jquery.uploadify这样的脚本，它更方便，可以与许多浏览器配合使用

<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>