...

View Full Version : Uploading images with JQuery / PHP?



karlosio
07-21-2010, 12:15 AM
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:



<!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
$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_im, 0, 0, 0, 0, $orig_width, $orig_height, $width, $height);
imagejpeg($orig_canvas, $orig_dir . '/'. $filename, 100);
imagedestroy($orig_canvas);
// create thumbnail
$thumb_canvas = imagecreatetruecolor($new_thumb_width, $new_thumb_height);
imagecopyresized($thumb_canvas, $image_im, 0, 0, 0, 0, $new_thumb_width, $new_thumb_height, $width, $height);
imagejpeg($thumb_canvas, $thumbs_dir . '/'. $filename, 100);
imagedestroy($thumb_canvas);
}

if($ext == "gif")
{
$image_im = imagecreatefromgif($orig_dir. '/'. $filename);

$orig_canvas = imagecreatetruecolor($orig_width, $orig_height);
imagecopyresized($orig_canvas, $image_im, 0, 0, 0, 0, $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_im, 0, 0, 0, 0, $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_im, 0, 0, 0, 0, $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_im, 0, 0, 0, 0, $new_thumb_width, $new_thumb_height, $width, $height);
imagepng($thumb_canvas, $thumbs_dir . '/'. $filename);
imagedestroy($thumb_canvas);
}
echo "Upload successfull";
}
}
}
}
?>

Spudhead
07-21-2010, 01:02 PM
You can't upload files using XMLHTTP - try using the jQuery form plugin (http://jquery.malsup.com/form/#file-upload).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum