Results 1 to 5 of 5

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

  1. #1
    Join Date
    Dec 2008
    Location
    Nigeria
    Posts
    97
    Thanks
    3
    Thanked 8 Times in 8 Posts

    Default DHTML CrossBrowser Ajax Simulator - Ajax-style photo uploading example

    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>

  2. #2
    Join Date
    Dec 2008
    Location
    Nigeria
    Posts
    97
    Thanks
    3
    Thanked 8 Times in 8 Posts

    Default

    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

  3. #3
    Join Date
    Dec 2008
    Location
    Nigeria
    Posts
    97
    Thanks
    3
    Thanked 8 Times in 8 Posts

    Default

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

  4. #4
    Join Date
    Jan 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  5. #5
    Join Date
    Dec 2008
    Location
    Nigeria
    Posts
    97
    Thanks
    3
    Thanked 8 Times in 8 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •