SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [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?

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
            }
    ?>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •