How to upload an image with JavaScript and PHP without any FrameWork?

Question:

I have a form made with HTML where an image is uploaded. So I have the form

<div class="form" align="center">
  <input type="text" id="firstname" placeholder="First Name">
  <input type="text" id="lastname" placeholder="Last Name">
  <input type="text" id="controlNumber" placeholder="Control Number">
  <input type="file" id="studentId" placeholder="Student Id">
  <input type="text" id="payAccount" placeholder="Pay Account">

<h2>Login information</h2>
<input type="password" id="password" placeholder="Password">
<div class="formbuttons">
    <button class="ok" onclick="postPassenger()">Register</button>
</div>
<label id="message"></label>

And so I send it to the PHP file

function postPassenger()
{
    console.log('POSTING passenger...');
    //create request
    var x = new XMLHttpRequest();
    //prepare request
    x.open('POST', 'apis/studentinsert.php', true);
    //form data
    var fd = new FormData();
    //values
    fd.append('lastName', document.getElementById('lastname').value);
    fd.append('name', document.getElementById('firstname').value);
    fd.append('controlNumber', document.getElementById('controlNumber').value);
   //fd.append('studentId', document.getElementById('studentId').value);
    fd.append('payAccount', document.getElementById('payAccount').value);

    console.log(fd);
    //send
    x.send(fd);
    console.log(fd);
    //handle readyState change event
    x.onreadystatechange = function() {
        // check status
        // status : 200=OK, 404=Page not found, 500=server denied access
        // readyState : 4=Back with data
        if (x.status == 200 && x.readyState == 4)
        {
            var JSONdata = JSON.parse(x.responseText); console.log(JSONdata);

        }
    }
}

I've been searching but only results made with JQuery or other FrameWorks appear. I don't know if they know of any alternative made with only JavaScript.

Answer:

1.- If you are working with forms, I recommend using the form tag since it was created for that. Your code would look like this:

<form id="miFormulario">
    
<div class="form" align="center">
   <input type="text" id="firstname" placeholder="First Name">
   <input type="text" id="lastname" placeholder="Last Name">
   <input type="text" id="controlNumber" placeholder="Control Number">
   <input type="file" id="studentId" placeholder="Student Id">
   <input type="text" id="payAccount" placeholder="Pay Account">
    
    <h2>Login information</h2>
    <input type="password" id="password" placeholder="Password">
  <div class="formbuttons">
   <button class="ok">
     Register
   </button>
  </div>
</form>

2.- I advise you not to use the events directly in the HTML tags.

On the side of Javascript it would be something like this

//Accedemos al formulario

const formulario = document.querySelector('#miFormulario');

// Creamos un objeto FormData y le pasamos como parámetro el formulario

const datosForm = new FormData(formulario);

3.- The easiest way to send information asynchronously is fetch

fetch('tuPHP',{
 method: 'POST',
 body: datosForm
})

4.- fetch is receiving as parameters the URL where you carry out the registration process, the method by which you are making the request and finally the data that you are going to send in the request.

4.- Finally you receive them with PHP.

Post Views: 0
Scroll to Top