javascript - Dynamically populating webpage with uploaded file using PHP/JS

Question

I have been tasked with modifying a page so that it accepts an uploaded file and parses the contents of that file to display it in a particular format.

I have code that parses the file - but currently it reads a static file on the server and reads it as a string. Instead I want the contents of the file to populate the string after upload.

What's the best way to accomplish this using PHP/JS. I would prefer not to use PHP at all if possible, but it's fine if I have to.

Other options are also welcome.

Thanks

Edit:

Thanks - I will post the code shortly as I'm yet making some changes to it.

This might be a stupid question, but I'm not familiar with AJAX.

Does the file have to be uploaded to any location, or can it be temporarily housed in a variable.

The file I need to use is

http://distributome.avinashc.com/howardL/scripts/distributome.js

In particular the lines xmlDoc = xmlhttp.responseXML;

I am opening the file "Distributome.xml" using the operation

xmlhttp.open("GET","Distributome.xml",false);

Instead I want to populate it using an XML file (or two) that the user uploads.

As another part of the task; I need to use two files so that they contain different data; so for now I am just appending the two files - in the lines that I have commented.

Edit:

   {        
   /*
   Split into distributions and relations - but append them
    xmlhttp.open("GET","Distributome.xml",false);
    xmlhttp.send();
    if (!xmlhttp.responseXML.documentElement && xmlhttp.responseStream)
        xmlhttp.responseXML.load(xmlhttp.responseStream);
    xmlDoc = xmlhttp.responseXML;
    xmlhttp.open("GET","Distributome-references.xml",false);
    xmlhttp.send();
    if (!xmlhttp.responseXML.documentElement && xmlhttp.responseStream)
        xmlhttp.responseXML.load(xmlhttp.responseStream);
    xmlDoc = xmlDoc+xmlhttp.responseXML;


    */
    getURLParameters();
    /*** Read in and parse the Distributome.xml DB ***/
    var xmlhttp=createAjaxRequest();
    xmlhttp.open("GET","Distributome.xml",false);
    xmlhttp.send();
    if (!xmlhttp.responseXML.documentElement && xmlhttp.responseStream)
        xmlhttp.responseXML.load(xmlhttp.responseStream);
    xmlDoc = xmlhttp.responseXML;
    try{
        DistributomeXML_Objects=xmlDoc.documentElement.childNodes;
    }catch(error){
        DistributomeXML_Objects=xmlDoc.childNodes;
    }

    traverseXML(false, null, DistributomeXML_Objects, distributome.nodes, distributome.edges, distributome.references, distributomeNodes, referenceNodes);

    xmlhttp=createAjaxRequest();
    xmlhttp.open("GET","Distributome.xml.pref",false);
    xmlhttp.send();
    if (!xmlhttp.responseXML.documentElement && xmlhttp.responseStream)
        xmlhttp.responseXML.load(xmlhttp.responseStream);
    var ontologyOrder = xmlhttp.responseXML;    
    getOntologyOrderArray(ontologyOrder);
   }

Edit:

I am not uploading the file to the server; instead I just want the content to be parsed when the user uploads - locally.

Answer 1

You can possibly start from here: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Found it here.