Wow, Brian, thanks so much for taking the time. I really appreciate
it.
On Sep 3, 8:06 pm, brian <bally.z...@gmail.com> wrote:
> On Thu, Sep 3, 2009 at 10:23 PM, Alan<alanmand...@gmail.com> wrote:
>
> > 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");
> > });
> > }
>
> First thing I suggest: just create the form as normal HTML and put it
> in a div that's hidden. You can use jQuery to fillin the value of the
> hidden field:
>
> $('#userID').val('whatever')
>
> When you want to show the form, just toggle the div it's in.
>
>
>
> > 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);
>
> The important thing to note here is that $destination is likely a path
> from root, not web_root. I can't say for sure without knowing what
> this resizeImage() function is. But it's a fair bet that the path is
> from server root. What you need to pass back to the client is the
> equivalent path from web_root (ie. DOCUMENT ROOT)
>
>
>
> > // Delete original
> > unlink($filename);
>
> > $result = $newPhotoID;
>
> Here, you've only got the name of the image (not even the extension).
> Again, you'll want to send the path from web_root.
>
>
>
> > }
> > 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.
>
> You should have just:
>
> echo $result;
>
> And make sure there is no whitespace after the closing ?> Better yet,
> leave off the closing ?> altogether. PHP will be ok without it and it
> avoids nasty surprises.
>
>
>
>
>
> > 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.
>
> If you're running PHP 5.2.0 or greater, you can do:
>
> $result = json_encode(
> array(
> 'photo_id' => $newPhotoID,
> 'src' => PATH_FROM_DOCUMENT_ROOT,
> 'width' => THE_WIDTH,
> 'height' => THE_HEIGHT
> )
> );
> }
> else
> {
> $result = 'failure';
> }}
>
> else
> {
> $result = 'reject';
>
> }
>
> echo $result;
>
> Then, in your JS function, test the returned text for "failure" or
> "reject" first, or parse the JSON object and create a new image tag
> with the supplied src, width, & height.
>
> Here are a couple of links that might
> help:http://funkatron.com/site/comments/safely-parsing-json-in-javascript/http://encosia.com/2009/07/07/improving-jquery-json-performance-and-s...
