带预览的图片上传器不起作用


Image uploader with preview didn't work

我有一个名为test.php的文件。在这个文件中,我写了下面的代码来上传图片(.PNG和.JPG)。我还添加了一些代码来在上传之前预览图片......似乎没有什么问题,但是当我按下提交按钮时,没有任何反应......为什么?我的问题在哪里?

更新:我进行了更改,现在收到此警告:警告:为 foreach() 提供的参数无效...

测试.php:

<script type="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<body>
<?php
if ( isset( $_POST[ 'submit' ] ) ) {
    define ("UPLOAD_DIR" , "uploaded/pic/");
    foreach ($_FILES["images"]["error"] as $key => $error) {
        if ($error == UPLOAD_ERR_OK) {
            $name = $_FILES["images"]["name"][$key];
            $info = getimagesize($_FILES["images"]["tmp_name"][$key]);
            $image_type = $info[2];
            $type = $_FILES['images']['type'][$key];
            // if the image is .JPG or .PNG
            if ( ($image_type == 3) ||  ($image_type == 2) ){
                // ensure a safe filename
                $name = preg_replace("/[^A-Z0-9._-]/i", "_", $name);
                // don't overwrite an existing file
                $i = 0;
                $parts = pathinfo($name);
                while (file_exists(UPLOAD_DIR . $name)) {
                    $i++;
                    $name = $parts["filename"] . "-" . $i . "." . $parts["extension"];
                }
                // preserve file from temporary directory
                $success = move_uploaded_file($_FILES["images"]["tmp_name"][$key], UPLOAD_DIR . $name);
                if (!$success) { 
                    echo "<p>Unable to save file.</p>";
                    exit;
                }
                // set proper permissions on the new file
                chmod(UPLOAD_DIR . $name, 0644);
                echo "<h2>Successfully Uploaded Images</h2>";
            }
            else{
                echo "<h2>format not supported... </h2>";   
            }
        }
    }
}
?>
<div id="upload_form">
    <form id="frm1" name="frm1" method="post" action="test.php" enctype="multipart/form-data">
      <p>
        <label for="images">insert your image</label>
        <input type="file" name="images" id="images" tabindex="80"/>
      </p>
      <img id="pic" name="pic" src="#" />
      <button type="submit" id="submit" name="submit">Upload Files!</button>
    </form>
    <script type="text/javascript" language="javascript">
      // Preview the picture before Uploading on the server!
         function readURL(input) {
            if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#pic').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
            }
        }
        $("#images").change(function(){
            readURL(this);
        });
     </script>
  </div>

您需要使用 []name="images作为数组

喜欢这个:

<input type="file" name="images[]" id="images" tabindex="80"/>