How to upload a file using xmlhttprequest???

ani707

New member
Bellow is my code:
How do I pass the data to php file?


Code:
<!DOCTYPE html>
<html>
<head>
<title>SomeTitle</title>

<script>

var object_1 =
{
   id: "test_1",
   name: "test_1",
   title: "Object 1",
   edit: function()
   {
      return "<div id=\"obj1\">" +
                "<label for=\"object1\">" + this.title + "</label>" +
                "<input type=\"text\" id=\"" + this.id + "\" name=\"" + this.name + "\">" +
             "</div>";   
   },

   display: function(Data)
   {
      return "<div id=\"obj2\">" +
                "<span>" + this.title + "</span>" +
                "<span>" + this.data(Data) + "</span>" +
             "</div>";   
   },
};

var object_2 =
{
   id: "test_2",
   name: "test_2",
   title: "Object 2",
   data:  function(theData){ return theData; },
   edit: function()
   {
      return "<div id=\"obj2\">" +
                "<label for=\"object2\">" + this.title + "</label>" +
                "<input type=\"text\" id=\"" + this.id + "\" name=\"" + this.name + "\">" +
             "</div>";     
   },

   display: function(Data)
   {
      return "<div id=\"obj2\">" +
                "<span>" + this.title + "</span>" +
                "<span>" + this.data(Data) + "</span>" +
             "</div>";   
   },
};

var object_3 =
{
   id: "test_3",
   name: "test_3",
   title: "Upload File",
   data: function(theData){return theData; },
   edit: function()
   {
      return "<div id=\"obj3\">" +
                "<label for=\"object3\">" + this.title + "</label>" +
                "<input type=\"file\" id=\"" + this.id + "\" name=\"" + this.name + "\">" +
             "</div>";   
   },

   display: function(Data)
   {
      return "<div id=\"obj2\">" +
                "<span>Uploaded File:</span>" +
                "<span>" + this.data(Data) + "</span>" +
             "</div>";   
   },
};


var object_4 =
{
   edit: function()
   {
      return "<div id=\"obj4\">" +
                "<input type=\"button\" onclick=\"submitForm()\" value=\"uploading Form\">" +
             "</div>";   
   },

   display: function(){    return ""; },  //nothing to show
};

var objArray = ["object_1","object_2","object_3","object_4"];

function editForm()
{
   let objEdit = "";

   for(let i=0, iLen=objArray.length; i<iLen; i++)
   { objEdit = objEdit + eval(objArray[i] + ".edit()"); }
 
   document.getElementById("myData").innerHTML = objEdit;
}

function displayForm()
{
   let objDisplay = "";
   let someData = fromSomewhereArr();

   for(let i=0, iLen=objArray.length; i<iLen; i++)
   { objDisplay = objDisplay + eval(objArray[i] + ".display('" + someData[i] + "')"); }
 
   document.getElementById("myData").innerHTML = objDisplay;
}

function submitForm()
{
   let data = [];
   function sendFileToStoreInFileSystem(data2)
   {  //data2 does not show up ;(
                        function sendToServer(file, data3)
                        {
                            var xhttp = new XMLHttpRequest();
                            xhttp.onreadystatechange =  function()
                            {
                                                        if (this.readyState == 4 && this.status == 200)
                                                        {   alert("File stored"); }
                            };
                                
                            xhttp.open("POST", file, true);
                            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                            xhttp.send(data3);   
                        }


                        sendToServer("/file.php", "filename=" + data2);
   }


   for(let i=0, iLen=objArray.length; i<iLen; i++)
   {
      let dataID = eval(objArray[i] + ".id");
      let dataValue = document.getElementById(" + dataID + ");

      if(dataValue){ data.push(dataValue.value); }
   }
  
   //let processed = processData(data);
   //saveDataIntoIndexedDB(processed);
   //sendDataToStoreInServer(processed);
   sendFileToStoreInFileSystem(data[2]);    //??? store data collected by object_3 (file: picture or pdf)
                                            //How to send data(object_3 (file: picture or pdf)) to a php file, right now my file.php is not getting anything
}

</script>
</head>
<body>

   <h1>My Application</h1><br>
   <div id="myData"></div><br><br>

   <input type="button" onclick="editForm()" value="Edit Form">
   <input type="button" onclick="displayForm()" value="Display Form">

</body>
</html>


Right now I cannot see anything “undefined”
 
Bellow is my code:
How do I pass the data to php file?


Code:
<!DOCTYPE html>
<html>
<head>
<title>SomeTitle</title>

<script>

var object_1 =
{
   id: "test_1",
   name: "test_1",
   title: "Object 1",
   edit: function()
   {
      return "<div id=\"obj1\">" +
                "<label for=\"object1\">" + this.title + "</label>" +
                "<input type=\"text\" id=\"" + this.id + "\" name=\"" + this.name + "\">" +
             "</div>";  
   },

   display: function(Data)
   {
      return "<div id=\"obj2\">" +
                "<span>" + this.title + "</span>" +
                "<span>" + this.data(Data) + "</span>" +
             "</div>";  
   },
};

var object_2 =
{
   id: "test_2",
   name: "test_2",
   title: "Object 2",
   data:  function(theData){ return theData; },
   edit: function()
   {
      return "<div id=\"obj2\">" +
                "<label for=\"object2\">" + this.title + "</label>" +
                "<input type=\"text\" id=\"" + this.id + "\" name=\"" + this.name + "\">" +
             "</div>";    
   },

   display: function(Data)
   {
      return "<div id=\"obj2\">" +
                "<span>" + this.title + "</span>" +
                "<span>" + this.data(Data) + "</span>" +
             "</div>";  
   },
};

var object_3 =
{
   id: "test_3",
   name: "test_3",
   title: "Upload File",
   data: function(theData){return theData; },
   edit: function()
   {
      return "<div id=\"obj3\">" +
                "<label for=\"object3\">" + this.title + "</label>" +
                "<input type=\"file\" id=\"" + this.id + "\" name=\"" + this.name + "\">" +
             "</div>";  
   },

   display: function(Data)
   {
      return "<div id=\"obj2\">" +
                "<span>Uploaded File:</span>" +
                "<span>" + this.data(Data) + "</span>" +
             "</div>";  
   },
};


var object_4 =
{
   edit: function()
   {
      return "<div id=\"obj4\">" +
                "<input type=\"button\" onclick=\"submitForm()\" value=\"uploading Form\">" +
             "</div>";  
   },

   display: function(){    return ""; },  //nothing to show
};

var objArray = ["object_1","object_2","object_3","object_4"];

function editForm()
{
   let objEdit = "";

   for(let i=0, iLen=objArray.length; i<iLen; i++)
   { objEdit = objEdit + eval(objArray[i] + ".edit()"); }
 
   document.getElementById("myData").innerHTML = objEdit;
}

function displayForm()
{
   let objDisplay = "";
   let someData = fromSomewhereArr();

   for(let i=0, iLen=objArray.length; i<iLen; i++)
   { objDisplay = objDisplay + eval(objArray[i] + ".display('" + someData[i] + "')"); }
 
   document.getElementById("myData").innerHTML = objDisplay;
}

function submitForm()
{
   let data = [];
   function sendFileToStoreInFileSystem(data2)
   {  //data2 does not show up ;(
                        function sendToServer(file, data3)
                        {
                            var xhttp = new XMLHttpRequest();
                            xhttp.onreadystatechange =  function()
                            {
                                                        if (this.readyState == 4 && this.status == 200)
                                                        {   alert("File stored"); }
                            };
                               
                            xhttp.open("POST", file, true);
                            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                            xhttp.send(data3);  
                        }


                        sendToServer("/file.php", "filename=" + data2);
   }


   for(let i=0, iLen=objArray.length; i<iLen; i++)
   {
      let dataID = eval(objArray[i] + ".id");
      let dataValue = document.getElementById(" + dataID + ");

      if(dataValue){ data.push(dataValue.value); }
   }
 
   //let processed = processData(data);
   //saveDataIntoIndexedDB(processed);
   //sendDataToStoreInServer(processed);
   sendFileToStoreInFileSystem(data[2]);    //??? store data collected by object_3 (file: picture or pdf)
                                            //How to send data(object_3 (file: picture or pdf)) to a php file, right now my file.php is not getting anything
}

</script>
</head>
<body>

   <h1>My Application</h1><br>
   <div id="myData"></div><br><br>

   <input type="button" onclick="editForm()" value="Edit Form">
   <input type="button" onclick="displayForm()" value="Display Form">

</body>
</html>


Right now I cannot see anything “undefined”
 
This may seem to work:

function submitForm()
{
let data = [];
function sendFileToStoreInFileSystem(data2)
{ //data2 does not show up ;(
function sendToServer(file, data3)
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{ alert("File stored"); }
};

xhttp.open("POST", file, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(data3);
}


sendToServer("/file.php", "filename=" + data2);
}



//let processed = processData(data);
//saveDataIntoIndexedDB(processed);
//sendDataToStoreInServer(processed);
//sendFileToStoreInFileSystem(data[2]);

const fileToUpload = document.getElementById("test_3").files;
sendFileToStoreInFileSystem(fileToUpload);


}
 
Back
Top