...

View Full Version : Resolved AJAX image upload



Phil Jackson
10-27-2009, 07:16 PM
Hi all. Been a long time since ive done this and i know its something simple.

Using this script:
http://www.webtoolkit.info/demo/javascript/aim/demo.html

it outputs an array which i then need to add an upload script to for it to work.
currently using this:



<?php

$filename = $_REQUEST['form']['name'].".jpg";
$image_location = $filename;

$uploadedfile = $_REQUEST['form']['file'];
$src = imagecreatefromjpeg($uploadedfile);
list($width,$height)=getimagesize($uploadedfile);

$newwidth=200;
$newheight=134;
$tmp=imagecreatetruecolor($newwidth,$newheight);

imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);

imagejpeg($tmp,$filename,100);
imagedestroy($src);
imagedestroy($tmp);

?>


But getting the following errors:

Warning: imagecreatefromjpeg(Block paving.jpg) [function.imagecreatefromjpeg]: failed to open stream: No such file or directory in C:\wamp\www\toolBar\index2.php on line 7



Warning: getimagesize(Block paving.jpg) [function.getimagesize]: failed to open stream: No such file or directory in C:\wamp\www\toolBar\index2.php on line 8



Warning: imagecopyresampled() expects parameter 2 to be resource, boolean given in C:\wamp\www\toolBar\index2.php on line 14



Warning: imagedestroy() expects parameter 1 to be resource, boolean given in C:\wamp\www\toolBar\index2.php on line 17

any help much appreciated.

Fumigator
10-27-2009, 10:05 PM
$filename = $_REQUEST['form']['name'].".jpg";

That is the filename of the file being uploaded but the file doesn't exist there. You have to use move_uploaded_file() to copy the file from its temporary holding place to somewhere on your file system.

http://us.php.net/manual/en/features.file-upload.php

Phil Jackson
10-27-2009, 10:09 PM
<?php

$target_path = "./";

$target_path = $target_path . basename( $_REQUEST['form']['file'] );

if(move_uploaded_file($_REQUEST['form']['file'] , $target_path)) {
echo "The file ". basename( $_REQUEST['form']['file'] ).
" has been uploaded";
} else{
echo "There was an error uploading the file ".$_REQUEST['form']['file'].", please try again!";
}

?>


doesn't work either

oesxyl
10-27-2009, 10:16 PM
<?php

$target_path = "./";

$target_path = $target_path . basename( $_REQUEST['form']['file'] );

if(move_uploaded_file($_REQUEST['form']['file'] , $target_path)) {
echo "The file ". basename( $_REQUEST['form']['file'] ).
" has been uploaded";
} else{
echo "There was an error uploading the file ".$_REQUEST['form']['file'].", please try again!";
}

?>


doesn't work either


print_r($_FILES);


best regards

Phil Jackson
10-27-2009, 10:18 PM
nor


<?php

$target_path = "./";

$target_path = $target_path . basename( $_REQUEST['form']['name'] );

if(move_uploaded_file($_REQUEST['form']['name'] , $target_path)) {
echo "The file ". basename( $_REQUEST['form']['name'] ).
" has been uploaded";
} else{
echo "There was an error uploading the file ".$_REQUEST['form']['name'].", please try again!";
}

?>

Phil Jackson
10-27-2009, 10:18 PM
returns empty array

Fumigator
10-27-2009, 10:19 PM
Throw the $_REQUEST array away. Use the $_FILES array. (oesxyl tried to give you a hint in that direction but was too subtle I guess :p )

Phil Jackson
10-27-2009, 10:38 PM
returns empty array
no good

oesxyl
10-27-2009, 11:11 PM
no good


print $_POST['file'];

is the file name and


print $_POST['name'];

will be the name from form. You use form[name], form[file] as names for input, is not good, is like my dog name is dog, :)
- $_REQUEST can be a GET or POST, mixing them is not a good idea.
- you still don't check if file exists before doing something whit them, :)
- $_FILES will store what you need, including error codes.

best regards

Fumigator
10-27-2009, 11:16 PM
no good

It's likely you don't have the form set up correctly. You need an enctype on the tag; read the link I provided for all the information you need to get it working.

Phil Jackson
10-28-2009, 12:29 AM
<!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" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Iframe Ajax</title>
<script type="text/javascript" src="webtoolkit.aim.js"></script>
<script type="text/javascript">
function startCallback() {
// make something useful before submit (onStart)
return true;
}

function completeCallback(response) {
// make something useful after (onComplete)
document.getElementById('nr').innerHTML = parseInt(document.getElementById('nr').innerHTML) + 1;
document.getElementById('r').innerHTML = response;
}
</script>
</head>

<body>

<form action="index2.php" method="post" onsubmit="return AIM.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback})">
<div><label>Name:</label> <input type="text" name="form[name]" /></div>
<div><label>File:</label> <input type="file" name="form[file]" /></div>
<div><input type="submit" value="SUBMIT" /></div>
</form>

<hr/>

<div># of submited forms: <span id="nr">0</span></div>
<div>last submit response (generated by form action - index.php file): <pre id="r"></pre></div>

</body>
</html>




<?php

$target_path = "./";

$target_path = $target_path . basename( $_REQUEST['form']['name'] );

if(move_uploaded_file($_REQUEST['form']['name'] , $target_path)) {
echo "The file ". basename( $_REQUEST['form']['name'] ).
" has been uploaded";
} else{
echo "There was an error uploading the file ".$_REQUEST['form']['name'].", please try again!";
}

?>




// JavaScript Document
/**
*
* AJAX IFRAME METHOD (AIM)
* http://www.webtoolkit.info/
*
**/

AIM = {

frame : function(c) {

var n = 'f' + Math.floor(Math.random() * 99999);
var d = document.createElement('DIV');
d.innerHTML = '<iframe style="display:none" src="about:blank" id="'+n+'" name="'+n+'" onload="AIM.loaded(\''+n+'\')"></iframe>';
document.body.appendChild(d);

var i = document.getElementById(n);
if (c && typeof(c.onComplete) == 'function') {
i.onComplete = c.onComplete;
}

return n;
},

form : function(f, name) {
f.setAttribute('target', name);
},

submit : function(f, c) {
AIM.form(f, AIM.frame(c));
if (c && typeof(c.onStart) == 'function') {
return c.onStart();
} else {
return true;
}
},

loaded : function(id) {
var i = document.getElementById(id);
if (i.contentDocument) {
var d = i.contentDocument;
} else if (i.contentWindow) {
var d = i.contentWindow.document;
} else {
var d = window.frames[id].document;
}
if (d.location.href == "about:blank") {
return;
}

if (typeof(i.onComplete) == 'function') {
i.onComplete(d.body.innerHTML);
}
}

}

Phil Jackson
10-28-2009, 01:00 AM
could really do with the help, much appreciated

oesxyl
10-28-2009, 01:06 AM
could really do with the help, much appreciated
Fumigator already said about enctype:


Note: Be sure your file upload form has attribute enctype="multipart/form-data" otherwise the file upload will not work.

http://us.php.net/manual/en/features.file-upload.post-method.php

best regards

seco
10-28-2009, 01:38 AM
do you have imagemagik or GD?

Phil Jackson
10-28-2009, 10:27 AM
I have tried with both but still not work

Phil Jackson
10-28-2009, 10:30 AM
I think im just gonna write my own... will post back later on today with the results

Phil Jackson
10-28-2009, 11:02 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="../www.actwebdesigns.co.uk(Aug2009)/js/jquery-1.3.1.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
$("#uploadSubmit").bind("click", function () {
var results = '<iframe src="uploader.php" name="uploader" id="uploaderIframe"></iframe>';
$("#uploader").append(results);
});
});
</script>
<style type="text/css">
#uploaderIframe { border:none; }
</style>
</head>

<body>
<form action="uploader.php" target="uploader" id="uploader" enctype="multipart/form-data" method="post" >
<div><label>Name:</label> <input type="text" name="fileToUploadName" /></div>
<div><label>File:</label> <input type="file" name="fileToUpload" /></div>
<div><input type="submit" value="Upload" id="uploadSubmit" /></div>
</form>
</body>
</html>




<?php
if(isset($_FILES) && count($_FILES)!=0)
{
print_r($_FILES);
print_r($_POST);
}
?>

Works like a charm!

Phil Jackson
10-28-2009, 05:07 PM
New problem. This works fine on localserver but when i upload and useonline, it is not there is nothing in the $_FILES array. Anyone know any reasons why that i can check?

EDIT: nor in the $_POST

oesxyl
10-28-2009, 05:20 PM
New problem. This works fine on localserver but when i upload and useonline, it is not there is nothing in the $_FILES array. Anyone know any reasons why that i can check?

EDIT: nor in the $_POST

what you have in http://www.webtoolkit.info/demo/javascript/aim/index.php?

best regards

Phil Jackson
10-28-2009, 05:25 PM
i have not used that, wrote my own.

logged.php:



in head:
<script type="text/javascript">
$(document).ready(function () {
$("#uploadSubmit").bind("click", function () {
var results = '<iframe src="https://web111.secure-secure.co.uk/snowyswebsolutions.co.uk/scripts/php/uploader.php" name="uploader" id="uploaderIframe"></iframe>';
$("#uploadResult").html(results);
});
});
</script>

inbody:
<form action="<?php echo address("no", "no"); ?>scripts/php/uploader.php?w=<?php echo md5($WEBSITE); ?>&r=<?php if($ROOT=="public_html") { echo 1; } else { echo 2; } ?>" target="uploader" id="uploader" enctype="multipart/form-data" method="post" >
<div class="dropDiv">
<p><a class="open"><small>Upload/Delete Images</small></a></p>
<?php
if($VERIFICATION!=1)
{
?>
<p><label>New Name:</label> <input type="text" name="fileToUploadName" /></p>
<p><label>File:</label> <input type="file" name="fileToUpload" /></p>
<h2>Size options</h2>
<p>Do not enter details into form section below if you would like to keep the origonal image dimensions.</p>
<p><label>Same Size As:</label><select></select></p>
<p><label>Height:</label> <input type="text" name="height" /></p>
<p><label>Width:</label> <input type="text" name="width" /></p>
<div><input type="submit" value="Upload" id="uploadSubmit" /></div>
<p><a class="close"><small>Close</small></a></p>

<?php
}
?>
</div>
<div id="uploadResult"></div>
</form>


uploader.php



<?php
echo "1";
print_r($_FILES);
print_r($_POST);
if(isset($_FILES) && count($_FILES)!=0)
{
echo "2";
$WEBSITE = $_GET['w'];
$ROOT = $_GET['r'];
$directory = "../../../users/".$WEBSITE."/".$ROOT."/ACTimages";
if($ROOT==1)
{
$ROOT = "public_html";
}
else
{
$ROOT = "www";
}
if(!empty($_FILES['fileToUpload']['tmp_name']))
{
if(!empty($_POST['width']) && !empty($_POST['height']))
{
if(!file_exists($directory))
{
mkdir($directory, 0700);
}

if(preg_match("#^[0-9]*$#is", trim($_POST['width'])) && preg_match("#^[0-9]*$#is", trim($_POST['width'])))
{
if(preg_match("#^image/((?:gif)|(?:jpg)|(?:jpeg)|(?:png))$#is", $_FILES['fileToUpload']['type'], $match))
{
$extention = $match[1];
if(!empty($_POST['fileToUploadName']))
{
$filename = $directory.$_POST['fileToUploadName'].".".$extention;
}
else
{
$filename = $directory.$_FILES['fileToUpload']['name'].".".$extention;
}

if(!file_exists($image_location))
{
$uploadedfile = $_FILES['fileToUpload']['tmp_name'];
if($extention=="gif")
{
$src = imagecreatefromgif($uploadedfile);
}
elseif($extention=="png")
{
$src = imagecreatefrompng($uploadedfile);
}
else
{
$src = imagecreatefromjpeg($uploadedfile);
}

list($width,$height)=getimagesize($uploadedfile);

if($_POST['height'] > $height || $_POST['width'] > $width)
{
die("Entering height or width values that are larger than the actual image will result in streched and poor quality images. Please alter values.");
}
$newwidth=$_POST['width'];
$newheight=$_POST['height'];

$tmp=imagecreatetruecolor($newwidth,$newheight);

imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);

if($extention=="gif")
{
if(imagegif($tmp,$filename,100))
{
imagedestroy($src);
imagedestroy($tmp);
echo "upload complete";
}
else
{
echo "upload failed";
}
}
elseif($extention=="png")
{
if(imagepng($tmp,$filename,9))
{
imagedestroy($src);
imagedestroy($tmp);
echo "upload complete";
}
else
{
echo "upload failed";
}
}
else
{
if(imagejpeg($tmp,$filename,100))
{
imagedestroy($src);
imagedestroy($tmp);
echo "upload complete";
}
else
{
echo "upload failed";
}
}
}
else
{
echo "file name already exists";
}
}
else
{
echo "please select a valid image file to upload";
}
}
else
{
echo "please enter a valid inputt for width and height to resize image";
}
}
elseif(!empty($_POST['width']))
{
//height empty
echo "please enter a height if you would like to rezize image";
}
elseif(!empty($_POST['height']))
{
//width empty
echo "please enter a width if you would like to rezize image";
}
else
{
if(preg_match("#^image/((?:gif)|(?:jpg)|(?:jpeg)|(?:png))$#is", $_FILES['fileToUpload']['type'], $match))
{
$extention = $match[1];
if(!empty($_POST['fileToUploadName']))
{
$filename = $directory.$_POST['fileToUploadName'].".".$extention;
}
else
{
$filename = $directory.$_FILES['fileToUpload']['name'].".".$extention;
}

if(!file_exists($image_location))
{
$uploadedfile = $_FILES['fileToUpload']['tmp_name'];
if($extention=="gif")
{
$src = imagecreatefromgif($uploadedfile);
}
elseif($extention=="png")
{
$src = imagecreatefrompng($uploadedfile);
}
else
{
$src = imagecreatefromjpeg($uploadedfile);
}

list($width,$height)=getimagesize($uploadedfile);

$newwidth=$width;
$newheight=$height;

$tmp=imagecreatetruecolor($newwidth,$newheight);

imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);

if($extention=="gif")
{
if(imagegif($tmp,$filename,100))
{
imagedestroy($src);
imagedestroy($tmp);
echo "upload complete";
}
else
{
echo "upload failed";
}
}
elseif($extention=="png")
{
if(imagepng($tmp,$filename,9))
{
imagedestroy($src);
imagedestroy($tmp);
echo "upload complete";
}
else
{
echo "upload failed";
}
}
else
{
if(imagejpeg($tmp,$filename,100))
{
imagedestroy($src);
imagedestroy($tmp);
echo "upload complete";
}
else
{
echo "upload failed";
}
}
}
else
{
echo "file name already exists";
}
}
else
{
echo "please select a valid image file to upload";
}
}
}
else
{
echo "Please select a file to upload";
}
}
?>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum