Webdigity Webmaster Forums - Attachment research log

apple2

Wed 3 October 2007, 04:58 am GMT +0200

This will cover attachments from the ground up and will move into fancy AJAX Jscript objects.

We start with a simple web page (index.html) that has an iframe in it which has a form.
The page will have a link when clicked will submit the form that is the iframe page.

apple2

Wed 3 October 2007, 05:00 am GMT +0200

Most easy way to attach without refresh is to use IFRAMES.

Structure of example:

File 1:
web page code with link
iframe code includes file 2 inside of file 1
jscript to activate the form in file 2

File 2:
form

File 3:
page returned when form is submitted
this page has the ablity to update information in file 1 such as show the image that was attached.

AGAIN:
File 1 includes File 2 in it.
You don't load File 2 directly.
File 2 is loaded with an iframe tag.

To submit file 2 the link in file 1 activates Javascript which has access through jscript commands to the form in File 2.
The submit function is called by Javascript as if you had clicked it in the second form.

apple2

Wed 3 October 2007, 05:11 am GMT +0200

index.html

<HTML>
<BODY>
<IFrame name='theiframe' Src='iframe.html' ></IFrame>
<br>
<div onclick="frames['theiframe'].document.forms['iframeform'].submit();">Submit</div>
</BODY>
</HTML>

iframe.html

<HTML>
<BODY>
<Form name='iframeform' method=post action='test.html'>
This is a form in the file iframe.html<br>
Click the submit link below which is in index.html to submit me!<br>
Text field: <input type=text name='temp'><br>
Images: <input type=file name='file'>
</Form>
</BODY>
</HTML>

test.html

<HTML>
<BODY>
Without refreshing the whole page I appear!<br>
The browser is showing index.html<br>
This is the output from test.html which was called by iframe.html<br>
Iframe.html is included in index.html by usign the iframe tag.<br>
</BODY>
</HTML>

What is going on:
In index.html which is the page you pull up in the browser you include another web age in a box called iframe.html

<IFrame name='theiframe' Src='iframe.html' ></IFrame>

In index.html we have a link when clicked it submits the form in the iframe.
To do that jscript needs to know the name of the iframe and the name of the form in the iframe.

get the document model object for the frame:
frames['theiframe'].document.
get the form object in that page named iframeform and call its submit function:
.forms['iframeform'].submit()

<div onclick="frames['theiframe'].document.forms['iframeform'].submit();">Submit</div>

Thats it!

apple2

Thu 4 October 2007, 05:31 am GMT +0200

Whats next?
We will add some PHP to take the uploaded image.
When you click browse jscript can automatically submit the form.
The resulting page that comes back will be the same form so we can add another attachment.
Each time an attachment is added it will update the main page with an image of the attachment.

Here is filles I am working with to do this: http://www.air4web.com/files/upload/

Bell and whistle:
Sometimes it is nice to add attachments in the post text.
A new BBcode is to include attachments inline with [attachment=] and below your post is a link by each attachment which adds it.

apple2

Wed 10 October 2007, 05:29 am GMT +0200

Alright now I've got it uploading attachments.
Ideally it would handle gifs off to PHP.
I probably won't post more here unless you ask a question.
Thanks!