Question

大家好，我这里有代码，允许您选择图像并立即预览。但是我在逐个选择图像时遇到问题，因为当我转到下一页时，我只得到我选择的最后一张图像。如何将所有逐个选择的图像保存在一个数组中并将其传递给下一页。当你一次选择多个图像但随后一个接一个地获取最后一个图像时，它会工作。

 <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

您可以像这样修改代码：

<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 = ['&lt;div id="image"&gt;&lt;img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>&lt;/div&gt;'].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>

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

$ picture_count - 上传图片的最大数量。

但是，我建议你使用像jquery.uploadify这样的脚本，它更方便，适用于许多浏览器

逐个上传图片

1 个答案: