Question

I am using an html form to upload a file to my server. I want to execute a javascript function only after the form has been submitted and the file has been successfully uploaded. The form opens a new page with the text “upload succeeded” if the file upload worked. I tried using a while loop that would loop until the file was found in the database but it crashed my browser. How can I do this? I’m using myform.submit() to submit my form right now.

Answer 1

You can use AJAX to upload you file and you the async return function (this is a event that will trigger when your request is done) to ether a success or failed message from you php.

EDIT:

Here is a ajax function iv made that u can use, just load this in an extenal file:

var ajax = function(data){
// Return false is no url... You need an url to get url data..
if(typeof data.url !== 'undefined'){
    var url = data.url;
    // Adept the function depending on your method
    if(data.method === 'GET' && data.params  !== 'undefined'){
    url+='?'+data.params;
    }
}else{
    return(false);}
var // Set some vars 'n' stuff
method      = ( data.method  === 'GET') ? 'GET' : 'POST',
params      = (typeof data.params  !== 'undefined') ? data.params   : null,
async       = ( data.async   === true) ? true    : false,
done        = (typeof data.done    === 'function')  ? data.done     : false,
return_value    =  null,
length      = (data.method  === 'POST') ? data.method.length : '';

var // Find out what ajax methods the browser support
    request_method  =  function(){
    var xmlhttp =  false;
    try {
    xmlhttp = new XMLHttpRequest();
    } catch (trymicrosoft) {
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (othermicrosoft) {
        try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (failed) {
        xmlhttp = false;
        }
    }
    }
    return xmlhttp;
}// This thing connet to the server
connect = function(){
    if(request = request_method()){}else{
    return(false);
    }
    request.open(method, url, async);
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.setRequestHeader("Content-length", length);
    request.setRequestHeader("Connection", "close");
    request.send(params);
    request_handle(request);
},// This is where the result get processed
request_handle = function(request){
    if(async){
    request.onreadystatechange = function() {
        if(request.readyState === 4 && request.status === 200) {
        done(data);
        }
    }
    }else{
    done(data);
    }
};

    connect();
return(return_value);
}

usage:

    ajax({
        url:    'test.php', 
        //// Your ajax request url              // no default // Must be set! 
        method: 'POST',  
        //// Method of sending ajax data            // default is POST
        async:  true, 
        //// What to do when done with the request      // no default
        done:   function(http){
        table(http,'test');
        }
    });