upload file in ajax

msi_333 · **Posted:** Sun Nov 30, 2008 9:31 pm

This 2 paces of code are you to upload files using AJAX, there is an HTML part and JAVASCRIPT part ,now , and with this code , you can upload files without refresh

here the index.php file

Code:

<html>
<head>
     
    <title>Upload File In Ajax</title>
    <script type="text/javascript" src="myscript.js"></script>
    <script type="text/javascript">
       
    </script>
</head>

<body>

    <form action="index.php" method="post" onsubmit="return MSI.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback})">
        <div>File Name: <input type="text" name="form[name]" /></div>
        <div>File Location: <input type="file" name="form[file]" /></div>
        <div><input type="submit" value="SUBMIT" /></div>
    </form>

    <hr/>

    <div>Times of submit: <span id="numsub">0</span></div>
    <div>Last submit result  (generated by form action - index.php file): <pre id="last"></pre></div>

</body>
</html>

and here the JAVASCRIPT myscript.js file ,

Code:

 function startCallback() 
 {
            // make something useful before submit (onStart)
            return true;
 }

function completeCallback(response) 
{
            // make something useful after (onComplete)
            document.getElementById('numsub').innerHTML = parseInt(document.getElementById('numsub').innerHTML) + 1;
            document.getElementById('last').innerHTML = response;
}
      
MSI = {

    frame : function(c) {

        var n = 'f' + Math.floor(Math.random() * 99999);
        var d = document.createElement('DIV');
        d.innerHTML = '<iframe style="display:none" src="about:blank" id="'+n+'" name="'+n+'" onload="MSI.loaded(\''+n+'\')"></iframe>';
        document.body.appendChild(d);

        var i = document.getElementById(n);
        if (c && typeof(c.onComplete) == 'function') {
            i.onComplete = c.onComplete;
        }

        return n;
    },

    form : function(f, name) {
        f.setAttribute('target', name);
    },

    submit : function(f, c) {
        MSI.form(f, MSI.frame(c));
        if (c && typeof(c.onStart) == 'function') {
            return c.onStart();
        } else {
            return true;
        }
    },

    loaded : function(id) {
        var i = document.getElementById(id);
        if (i.contentDocument) {
            var d = i.contentDocument;
        } else if (i.contentWindow) {
            var d = i.contentWindow.document;
        } else {
            var d = window.frames[id].document;
        }
        if (d.location.href == "about:blank") {
            return;
        }

        if (typeof(i.onComplete) == 'function') {
            i.onComplete(d.body.innerHTML);
        }
    }

}

I wish it is helpful,

upload file in ajax

Users browsing similar posts