Upload photos with php without reload

Question

What I want

I want to upload a file without without reloading the page, also I want to add the source link for the image to the textarea.

So when I push the upload_photo, the image uploads and a link is added to the textarea.

I want pure HTML, Javascript|AJAX and PHP.

---

What I have

---

<form action"index.php" method="post" enctype="multipart/form-data">
    <textarea id="textarea" name="text"></textarea>
        <input type="file" name="photo" />
        <input type="submit" name="upload_photo"/>
    <input type="submit" name="post"/>
</form>

Example sites:

---

http://www.friendfeed.com - the page don't reloads when you upload the files

What I don't want

---

Please avoid posting solutions with jQuery or any library, API.

Answer 1

This can indeed be done with AJAX. I don't think that using AJAX is any more of a security risk than sending a vanilla HTML form; you will have to validate all user input on the server side all the same. Here's a simple example:

http://www.webtoolkit.info/ajax-file-upload.html

Answer 2

That's easy. Put an iframe, give it a name, for example "MyIframe". Then in the form, add the TARGET attribute, with the value "MyIframe", and the action - the script that takes the upload (takeupload.php for example) In the main page define a Javascript function that does something you need after the upload is done, which will be called, with parameters, from the page generated by takeupload.php.

in takeupload.php upload the image, then send as an output a normal blank HTML page that will execute a script which will call the method described above, with a set of parameters you need (image name, path, error, or plain HTML to insert somewhere, etc.).

use it like this:

<script type="text/javascript">
parent.YourJSMethod(parameters);
</script>

The page will be loaded in the iframe, and it will run a function defined outside the iframe. Upload is done, and the parent page receives data about the result.

This is fairly simple. No jQuery needed, no AJAX, no nothing, just a very simple Javascript code and a little HTML.