What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

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