[jquery] image upload

Hello Im working on an image uploader.

This is my html & javascript:

Code HTML4Strict:

---

<script type="text/javascript" src="jquery/jquery.js"></script>
<script>
jQuery("#upload").click(function () {
    $.ajax({
    type: "POST",
    url: "upload.php",
 
    });
});
 
</script>
 
 
<form action="" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" />
<br />
<input type="submit" name="submit" id="upload" value="Submit" />
</form>

---

AND this is my PHP:

PHP Code:

---

<?
$random = time();

if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
&& ($_FILES["file"]["size"] < 20000))
  {
  if ($_FILES["file"]["error"] > 0)
    {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
    }
  else
    {
    echo "Upload: " . $_FILES["file"]["name"] . "<br />";
    echo "Type: " . $_FILES["file"]["type"] . "<br />";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
    echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";

    if (file_exists("upload_pic/" . $_FILES["file"]["name"]))
      {
      echo $_FILES["file"]["name"] . " already exists. ";
      }
    else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "upload_pic/".$random.$_FILES["file"]["name"]);
      echo '<img src = "upload_pic/'.$random.$_FILES["file"]["name"].'"/>';
      }
    }
  }
else
  {
  echo "Invalid file";
  }
?>

---

How do I get the data selected in the file input to be recognized in my php? Do I have to somehow send the data through javascript?

You will need to use either an iframe or flash as currently it's not possible to to use straight javascript by itself unless you use the HTML5 file api but but isn't really an option as it has very limited browser support.

Hi, thank you for your response. I have done a bit of reading and have come up with this:

Code JavaScript:

---

<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.form.js"></script>
 
<script type="text/javascript" >
 $(document).ready(function() { 
 
            $('#photoimg').live('change', function()            { 
                       $("#preview").html('');
                $("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
            $("#imageform").ajaxForm({ target: '#preview'}).submit();
 
            });
        }); 
</script>

---

I used the form plugin. What this does is process the php and outputs the result (the image) into the #preview div.
Now what I would like to do is allow it to display multiple images. At the moment it will only let me preview one image.

Here is the PHP:

Code PHP:

---

<?php
$path = "uploads/";
 
    $valid_formats = array("jpg", "png", "gif", "bmp");
    if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
        {
            $name = $_FILES['photoimg']['name'];
            $size = $_FILES['photoimg']['size'];
 
            if(strlen($name))
                {
                    list($txt, $ext) = explode(".", $name);
                    if(in_array($ext,$valid_formats))
                    {
                    if($size<(1024*1024))
                        {
                            $actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
                            $tmp = $_FILES['photoimg']['tmp_name'];
                            if(move_uploaded_file($tmp, $path.$actual_image_name))
                                {
 
                                    echo "<img src='uploads/".$actual_image_name."'  class='preview' height = '50'>";
                                }
                            else
                                echo "failed";
                        }
                        else
                        echo "Image file size max 1 MB";                    
                        }
                        else
                        echo "Invalid file format..";    
                }
 
            else
                echo "Please select image..!";
 
            exit;
        }
?>

---