0

こんにちはみんな私はあなたが画像を選択してすぐにそれをプレビューすることを可能にするコードをここに持っています。しかし、次のページに移動すると、最後に選択した画像しか表示されないため、画像を1つずつ選択するときに問題が発生します。選択したすべての画像を1つずつ配列に保存して、次のページに渡すにはどうすればよいですか。一度に複数の画像を選択しているときに機能しますが、1つずつ最後の画像を取得します。

 <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 に答える