Question

I haven’t used much javascript before, and I’m not much of a php programmer either, come to think of it, but I’m attempting to learn by building a little website.

I’ve got a form which has a file upload input which I’m attempting to make all nice sexy with this great script but there doesn’t appear to be a tutorial and the code isn’t commented.

(I think) I know how to make it work ok but I’m interested in how it works. Does anyone fancy taking a quick look at it and telling me what all the code in the js and php file is doing?

I’d really appreciate it 🙂

Answer 1

I wouldn’t recommend using this library, first of all, since there are much better ones out there, but your question was how this one worked, not whether it was a good one or not.

Here goes:

1. ajaxUpload is called by one of the buttons in the upload form.
2. ajaxUpload first ensures that all the function arguments are correct, creating an alert box (!) if there’s a problem with one of them. (It would be a better idea to throw an error using throw "error message" instead.)
3. ajaxUpload then creates an iframe using document.createElement, and gives it zero width and height so it’ll be invisible, before adding it to the document. It gives the iframe the name ajax-temp.
4. ajaxUpload adds the doUpload function as a onload listener on the iframe. It uses the addEvent function as a cross-browser way to do this.
5. Next, ajaxUpload sets the calling form’s target attribute to point to the iframe, using the name that it gave the iframe earlier. This causes the form to submit into the iframe, instead of replacing the current page. The function also sets some other attributes on the form, even though it would probably be a better idea to add those attributes in the HTML source and not from Javascript.
6. Finally, ajaxUpload submits the form using form.submit().
7. The browser submits the form to the server, causing ajaxupload.php to run.
8. In ajaxupload.php, the script first checks that the browser did actually send a file (in case a curious user visited the url manually instead of submitting the form), then calls the uploadImage function with a bunch of parameters that it got from the $_REQUEST object.
9. uploadImage does a bunch of checks on the arguments it receives from the client, making sure that the file isn’t too big, has the right extension, etc. If all the checks are passed, it saves the image and returns the filename where the image was saved. Otherwise it returns the list of errors.
10. If the result returned by uploadImage isn’t an array of errors, the script returns a success message and an <img> tag with it’s src set to the url of the image. Otherwise, it returns a failure message.
11. On the client, the return of the success or error message causes the load event on the iframe to fire. The doUpload function, which is registered as a listener, is called.
12. doUpload removes itself as a listener from the iframe, and runs some javascript code in the context of the iframe by setting the iframe’s src attribute. This code copies the iframe’s contents to the parent page.
13. Finally, doUpload removes the iframe from the document, waiting a short time beforehand in some browsers.

Whew, that sure took a while to write.