0

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

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

}
?>
4

1 回答 1

0

您可以像这样修改您的代码：

<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 之类的脚本，它更方便，并且适用于许多浏览器

于 2013-01-22T09:24:48.083 回答