DHTML CrossBrowser Ajax Simulator - Ajax-style photo uploading example

**diltony** · 04-13-2009, 07:06 AM

1) CODE TITLE: DHTML CrossBrowser Ajax Simulator / Photo Uploader

2) AUTHOR NAME/NOTES: Tony Ogundipe

3) DESCRIPTION: Demonstrating How To Upload Files With My New Ajax Simulator. It can also be used to submit any form no matter how large in an ajax-like manner.
Unlike ajax, it has no limit to the size or the content of the form, so can upload 100 pictures or whatever your server can handle. Online demo can be found:

4) URL TO CODE: http://www.mwebng.net?net=dl

Online demo: http://www.mwebng.net/demos/jupload/

The main code engine however is:

Code:

<script>
function sendData(form,s) {
 var d=document.createElement('DIV');
 document.body.appendChild(d);  
 d.style.cssText+="width:100%;height:50px;display:none";
 var sid="frame_"+Math.random()+"_"+Math.random( );
 d.innerHTML="<iframe width='100%' name='"+sid+"' height='50'></iframe>";

 var l=document.getElementsByName(sid);var frm=l[l.length-1];
   
var timerx=setInterval(
function() {
if(frm.contentWindow.location.href.indexOf("http://")==0) {
clearInterval(timerx);


var response={title:'title',location:'location',innerHTM:'innerHTML'};
response.location=frm.contentWindow.location.href;
response.title=frm.contentWindow.document.title;
response.innerHTML=frm.contentWindow.document.body.innerHTML;
response.window=frm.contentWindow;
response.document=frm.contentWindow.document;

s(response);
}
},500
);  
 form.target=sid;form.submit();
}
</script>

**diltony** · 04-15-2009, 09:51 PM

There is a slight problem with my website (seemed to be expired without me getting a warning email, it is being rectified and should be up hopefully in the next 24 hours).
Meanwhile, the effect, i have now uploaded to
Demo: http://mybusinesspals.com/demos/jupload

**diltony** · 04-17-2009, 10:57 AM

My site is back online now. . .sorry for the inconvenience.

**shoutout** · 01-31-2010, 04:41 AM

good day all

I have been looking for a upload code for my site. I have downloaded the file but can't seem to get it to work. I have placed the script below please advise me on what I did wrong.

thank you
shoutout

<html>
<head>
<title>[DHTML/CrossBrowser] Demonstrating How To Upload Files With My New Ajax Simulator</title>
<script src="file:///C|/Documents and Settings/Eddie Fitzgerald/Desktop/jupload/send.data.js"></script>
<script>
//function that is called whenever an image is selected for upload
function uploadFile(form) {

var dstat=document.getElementById("stat_msg"); //variable holding the status display
var dimage=document.getElementById("display_image"); //variable for holding the image element

//displays whenever a new image is selected
dstat.innerHTML="<font color='blue'>Uploading file. . .please wait</font>";

/*the main function which receives 2 parameters, the form, and the response function
the response in case you do not notice is actual an html document that returns the result page
for instance, if the page you just submitted to has a title, you can actually use response.title to get it familiar iight?
*/
sendData(form,
function(response) {

switch(response.innerHTML) {
case "success": //this is actually returned by the php upload script if the file is jpeg
dstat.innerHTML="<font color='blue'>Upload was successful. . .</font>";
dimage.src=dimage.src+"?cache="+new Date().getTime(); //attempt to bust the cache
break;
case "unsupported": //this is actually returned by the php upload script if the file is not jpeg
dstat.innerHTML="<font color='red'>That file you uploaded was discarded because it was unsupported. . .</font>";
break;
default: //when something else happens, maybe disconnection, or script was missing. . .you can analyse the innerHTML or other stuffs to determine if necessary
dstat.innerHTML="<font color='red'>Upload failed for unknown reasons. . .</font>";
}

//redisplays the supposedly hidden upload form
form.style.visibility="visible";

}
);

form.style.visibility="hidden";
form.reset();

return false;
}
</script>
</head>
<body>
<h2>[DHTML/CrossBrowser]Demonstrating How To Upload Files With My New Ajax Simulator</h2>
<hr size='1'>
For examples purpose, try uploading a jpeg picture, and then any other type of file to see how it works.<br>
Any form that can be submitted ordinary like that into the browser can work with this script.
Just that the results are returned in an ajax manner, no matter the content of the form, photos. . .
and no matter how large. You can download the full source code from <a href="http://www.mwebng.net/?net=dl" target="_blank">http://www.mwebng.net/?net=dl</a>

<hr size='1'>
<font color="black"><b>Status: <span id="stat_msg"><font color='blue'>Idle. . .</font></span></font>

<form onsubmit="return uploadFile(this);" action="file:///C|/Documents and Settings/Eddie Fitzgerald/Desktop/jupload/file-upload.php" method="post" enctype="multipart/form-data">
Upload: <input name="userfile" type="file" onchange=" uploadFile(this.form);" />
</form>

<img src="file:///C|/Documents and Settings/Eddie Fitzgerald/Desktop/jupload/demo.php" id="display_image">

</body>
</html>

**diltony** · 01-08-2012, 11:07 AM

The demo was later moved to http://dhtmlextreme.net/demos/jupload

Thread: DHTML CrossBrowser Ajax Simulator - Ajax-style photo uploading example

Thread Tools

Search Thread

DHTML CrossBrowser Ajax Simulator - Ajax-style photo uploading example

Bookmarks

Bookmarks

Posting Permissions