Aquí tenéis los comentarios completos de la cabecera del archivo html, con notas y explicaciones importantes.
Saludos.
Código HTML:
<!--
Author: Alberto Moyano Sánchez
Date: 2009-05-24
Description:
- This is a script to upload a form dynamically with Ajax, which contains an
image and more data. The image is displayed in preview when it is selected.
- It consists of one html page and two php scripts. I wanted to do the
funtionality of the first php script, which resizes the selected image,
with Ajax instead of php. But it is not possible due to the limited action
of JavaScript over the file field and the filesystem, because of security
reasons.
- There are actually two forms, one for the image and another for the rest
of the data. (The reason is that JavaScript cannot take the selected file
of the file field. It is explained some points below.) There is also an
iframe which displays the image.
- The image form is automatically submited when a new file is selected. It is
sent to a php script which resizes the image, stores it in a temporary
directory and displays it. The target of the image form is the iframe, so
the image is displayed in it without need of reloading the whole page.
- The php script also writes in the iframe a control variable containing the
temporary path of the uploaded image. This variable is key to dynamically
upload the data form with Ajax.
- I wanted to do the resizing and previewing of the image with JavaScript,
saving the submitting of the image form and the processing of the image
at the server side. However it is not possible, because JavaScript cannot
interact with the filesystem due to security reasons.
- Another handicap is that JavaScript can barely manage the file field, due
to security reasons too. JavaScript can only read the name of the selected
file but not the whole path. JavaScript can neither take the selected file
to send it via Ajax. Thus, the file field cannot be sent via Ajax. The only
way it can be sent is submitting the whole form. Therefore must be a
separate form only for the file field, in order be able to submit only this
field and not the rest of the fields.
- The image form has another hidden field (for testing purpose it is visible)
to store the name of the previous selected file, so it can be removed by
the php script.
- The button to submit the data form takes the data fields and the control
variable of the iframe, which says if there is an uploaded image and what
its temporary path in the server is. A second php script is called, which
moves the uploaded image from the temporary directory to the final one,
and process the rest of the data.
Notes and improvements:
- This script has been tested with Firefox 3.0.10, Opera 9.64, Safari 4
and Internet Explorer 6.0. Everything works fine (with the exception of
the next point).
- The event "onchange" of the file field is well performed by all browsers
when selecting a file with the button "browse". Firefox and Safari don't
allow to write in the field, only to use the button to select a file.
Explorer and Opera allow to write in the text box of the field. Explorer
works fine and trhows the event "onchange" when the field loses the focus.
Opera throws the event "onchange" everytime a key is pressed when typing
in the field, what is not the desired behaviour.
- The file to upload must be validated with JavaScript previously to send
it in the function uploadImage().
- If a file is sent, which is larger than the maximum size especified with
the hidden field MAX_FILE_SIZE, PHP will throw an error, with error code
2. To avoid such message and a futile sending, the file must be previously
validated with JavaScript.
- In order to test the posible delays with the uploads, adjust the sleep
statement in the function displayImage() in the file uploadImage.php.
Adjust also the parameters in the JavaScript function submitForm().
- When an image is uploaded to the temporary directory to preview it, it is
checked if there was a previously previewed image, to remove it from the
temporary directory. However, the temporary directory must be emptied
from time to time, because there will be files from the previewed images
of forms that were finally not submited.
-->