Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Location
    In the wilderness
    Posts
    106
    Thanks
    9
    Thanked 5 Times in 5 Posts

    Uploading images with JQuery / PHP?

    Hi, I'm creating a basic image uploading script and would like to use Jquery's AJAX function so It all happens on one page. The upload script works fine without it but when I try to add some AJAX, PHP doesn't seem to get the file name in the $_FILES array and outputs no file uploaded. Is there something I am missing here?

    Heres my code so far:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Image Upload</title>
    <script type="text/javascript" src="../js/jquery-1.4.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    	$('#uploadform').submit(function(e)
    	{
    		e.preventDefault();
    		var userfile = $('#userfile').val();
    		$.ajax(
    		{
    			url: 'upload.php',
    			type: 'POST',
    			contentType: 'multipart/form-data',
    			cache: false,
    			data: userfile,
    			success: function(html)
    			{
    				$('#success').html(html);
    			}
    		});
    	});
    });
    </script>
    </head>
    
    <body>
    <div id="success"></div>
    <form method="post" enctype="multipart/form-data" action="upload.php" id="uploadform">
    <label for="userfile">Upload this file:</label>
    <input type="file" name="userfile" id="userfile" />
    <span><input type="submit" name="submit" value="Upload" /></span>
    </form>
    </body>
    </html>
    upload.php

    PHP Code:
    <?php
    $orig_dir 
    'upload'// original directory
    $thumbs_dir 'thumbs'//thumbnail directory
    $thumb_size 150// thumbnail size
    $orig_max_size 800// original image will be cropped to this size
    $file_parts = array();
    $allowed_ext = array('jpg','jpeg','gif','png');
    $ext '';
    $filename $_FILES['userfile']['name'];
    $temp_name $_FILES['userfile']['tmp_name'];
    $size $_FILES['userfile']['size'];

    if(!
    $filename)
    {
        echo 
    "No file was uploaded";
        exit();
    }
    else
    {
        
    $file_parts explode('.'$filename);
        
    $ext array_pop($file_parts); // find the file extension
        
        // if its a allowed file type
        
    if(!in_array($ext$allowed_ext))
        {
            echo 
    "Your not allowed to upload a file of that type!";
            exit();
        }
        else
        {
            
    // check if the file already exists
            
    if(file_exists($orig_dir '/' $filename))
            {
                echo 
    "File with this name already exists";
                exit();
            }
            else
            {
                
    // move the file
                
    if(!move_uploaded_file($temp_name$orig_dir '/' $filename))
                {
                    echo 
    "There is a problem uploading your file. Sorry...";
                    exit();
                }
                else
                {
                    
    // get image dimensions
                    
    list($width$height$type$attr) = getimagesize($orig_dir'/'$filename);
                    
    // ratio
                    
    if($width $height)
                    {
                        
    $orig_width $orig_max_size;
                        
    $orig_height round($height $width $orig_max_size);
                        
    $new_thumb_width $thumb_size;
                        
    $new_thumb_height round($height $width $thumb_size);
                    }
                    elseif(
    $height $width)
                    {
                        
    $orig_height $orig_max_size;
                        
    $orig_width round($width $height $orig_max_size);
                        
    $new_thumb_height $thumb_size;
                        
    $new_thumb_width round($width $height $thumb_size);
                    }
                    else
                    {
                        
    $orig_width $orig_max_size;
                        
    $orig_height $orig_max_size;
                        
    $new_thumb_width $thumb_size;
                        
    $new_thumb_height $thumb_size;
                    }
                    
    // if its a jpg
                    
    if($ext == "jpeg" || $ext == "jpg")
                    {
                        
    $image_im imagecreatefromjpeg($orig_dir'/'$filename);
                        
    // resize the original to 800px in width or in height, whichever is larger
                        
    $orig_canvas imagecreatetruecolor($orig_width$orig_height);
                        
    imagecopyresized($orig_canvas$image_im0000$orig_width$orig_height$width$height);
                        
    imagejpeg($orig_canvas$orig_dir '/'$filename100);
                        
    imagedestroy($orig_canvas);
                        
    // create thumbnail
                        
    $thumb_canvas imagecreatetruecolor($new_thumb_width$new_thumb_height);
                        
    imagecopyresized($thumb_canvas$image_im0000$new_thumb_width$new_thumb_height$width$height);
                        
    imagejpeg($thumb_canvas$thumbs_dir '/'$filename100);
                        
    imagedestroy($thumb_canvas);
                    }
                    
                    if(
    $ext == "gif")
                    {
                        
    $image_im imagecreatefromgif($orig_dir'/'$filename);
                    
                        
    $orig_canvas imagecreatetruecolor($orig_width$orig_height);
                        
    imagecopyresized($orig_canvas$image_im0000$orig_width$orig_height$width$height);
                        
    imagegif($orig_canvas$orig_dir '/'$filename);
                        
    imagedestroy($orig_canvas);
                    
                        
    $thumb_canvas imagecreatetruecolor($new_thumb_width$new_thumb_height);
                        
    imagecopyresized($thumb_canvas$image_im0000$new_thumb_width$new_thumb_height$width$height);
                        
    imagegif($thumb_canvas$thumbs_dir '/'$filename);
                        
    imagedestroy($thumb_canvas);
                    }
                    
                    if(
    $ext == "png")
                    {
                        
    $image_im imagecreatefrompng($orig_dir'/'$filename);
                    
                        
    $orig_canvas imagecreatetruecolor($orig_width$orig_height);
                        
    imagecopyresized($orig_canvas$image_im0000$orig_width$orig_height$width$height);
                        
    imagepng($orig_canvas$orig_dir '/'$filename);
                        
    imagedestroy($orig_canvas);
                    
                        
    $thumb_canvas imagecreatetruecolor($new_thumb_width$new_thumb_height);
                        
    imagecopyresized($thumb_canvas$image_im0000$new_thumb_width$new_thumb_height$width$height);
                        
    imagepng($thumb_canvas$thumbs_dir '/'$filename);
                        
    imagedestroy($thumb_canvas);
                    }
                    echo 
    "Upload successfull";
                }
            }
        }
    }
    ?>
    "The advantage of computers is that they do exactly what you tell them to do. The disadvantage of computers, on the other hand, is that they do exactly what you tell them to do."

    Excellent resource for learning PHP here

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    You can't upload files using XMLHTTP - try using the jQuery form plugin.

  • Users who have thanked Spudhead for this post:

    karlosio (07-22-2010)


  •  

    Posting Permissions

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