Thanks, Brian. I appreciate it.
As mentioned, the document has the following script references in
<head>...
<script src="script.js"></script>
<script src="jquery.js"></script>
<script src="jquery.form.js"></script>
As a result of a user action, JavaScript (from script.js) generates a
form and inserts it into the html of a table cell. It also calls the
Ajax form function to register the form. The code looks like this...
function generateForm() {
// Create form
content = '<form id="imageUploader1" name="imageUploader1"
action="upload-image.php" method="post" enctype="multipart/form-data">
\n';
content += ' <input id="userID" name="userID" type="hidden"
value="'
+ userID + ".1" + '">\n';
content += ' <input id="sourceFile" name="sourceFile"
type="file"
size="20" style="font-size:8pt;">\n';
content += ' <br><input type="submit" value="Upload Photo #1"
style="margin-top:2pt; font-size:8pt;">\n';
content += '</form>\n';
// Insert form
parent.client.document.getElementById("clientAreaCell").innerHTML =
content;
// Set Ajax form handler
$('#imageUploader1').ajaxForm(function() {
alert("You just uploaded using Form 1");
});
}
In reality, there are multiple forms but they're all alike. In each
form, the user has a single browse button (to choose a photo to
upload) and then clicks a Submit button. The .#, following the userID,
tells me which of four allowable photos is being uploaded.
As shown, as soon as Submit it clicked, upload-image.php is run. After
verifying a legitimate user id, the following code runs:
if ((($_FILES['sourceFile']['type'])=='image/pjpeg') ||
(($_FILES
['sourceFile']['type'])=='image/jpeg')) {
$filename = '/big/dom/directoryname/photos_temp/' .
$_FILES
['sourceFile']['name'];
// Upload
if(@move_uploaded_file($_FILES['sourceFile']['tmp_name'],
$filename)) {
// Resize
setMemoryLimit($filename);
$destination = /big/dom/directoryname/photos/'
. $newPhotoID .
'.jpg';
resizeImage ($filename, $destination, 140,
110, 5);
// Delete original
unlink($filename);
$result = $newPhotoID;
}
else {
$result = "failure";
}
}
else {
$result = "reject";
}
Not shown above:
$newPhotoID will be generated by concatenating the userID (retrieved
from $_REQUEST['userID']) with the server time in order to create a
unique file name; and resizeImage is a separate function for reducing
the photo into a thumbnail.
At the end of the PHP code, the following is generated:
<html>
<body>
<?php echo $result; ?>
</body>
</html>
This is from the pre-Ajax days.
Back to the JavaScript, the Ajax form handler presents a dialog box.
All of the above currently works.
What I'm hoping to do, instead, is parse the result from the server.
If it's a file name, I'll do what you mentioned (i.e., use JavaScript
to change the src property of an img control). If the result is
"failure", I'll know that something happened with the image processing
on the server. And, if the result is "reject", I'll know there was
something wrong with the upload (e.g., the user wasn't sending a .jpeg
file).
After reading your message about the JSON object, I went online and
looked at a variety of examples. Since the sample implementations were
different from mine, I wasn't exactly sure what I should be using. For
instance, I saw that I could use something like the following in my
PHP file...
$array = array("a"=>$newPhotoID, "b"=>$result);
$json = json_encode($array);
echo "var data = $json;";
... but I wasn't sure whether I needed to require some reference in my
PHP file. And, on the JavaScript side, I could see that some examples
did something with the onclick event of the form while others
specified "success:" and somehow referenced a variable called
responseText.
Thanks again for your help.
