How To Upload File By Javascript

File uploading is a basic requirement in a website. It is done using a server-side script.

Requires to reload the page after form submission to execute the script.

With AJAX customer-side script is collaborate with the server-side script and performs the action without page reload.

In this tutorial, I show how yous can upload a file using JavaScript AJAX, and PHP.

How to upload file with JavaScript and PHP

HTML
PHP
JavaScript
Output
Conclusion

1. HTML

Create a file and button element. Added onclick event on the button which calls uploadFile() function.

Completed Code

<div >   <input type="file" name="file" id="file">   <input blazon="push button" id="btn_uploadfile"       value="Upload"       onclick="uploadFile();" > </div>

two. PHP

Create a ajaxfile.php file and an upload binder to shop files.

Cheque if $_FILES Array is gear up or not. If set and then assign $_FILES['file']['name'] to $filename, file proper noun with upload location in $location variable.

Get the file extension and assign valid file extensions in $valid_ext Array.

Bank check if file extension exists in $valid_ext Assortment. If exists so upload the file and assign 1 to $response if successfully uploaded.

Return $response.

Completed Code

<?php  if(isset($_FILES['file']['name'])){    // file name    $filename = $_FILES['file']['name'];     // Location    $location = 'upload/'.$filename;     // file extension    $file_extension = pathinfo($location, PATHINFO_EXTENSION);    $file_extension = strtolower($file_extension);     // Valid extensions    $valid_ext = array("pdf","doc","docx","jpg","png","jpeg");     $response = 0;    if(in_array($file_extension,$valid_ext)){       // Upload file       if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){          $response = 1;       }     }     echo $response;    get out; }

3. JavaScript

Create uploadFile() function which calls on the Upload push button click.

Read files of a file element. If a file is selected and then create an object of FormData otherwise, alert "Please select a file" message.

Append files[0] to 'file' key in formData.

To send AJAX request create an object of XMLHttpRequest. With open() method prepare request method to "Mail" and AJAX file path.

Handle AJAX successful callback with onreadystatechange() method. Assign this.responseText in response variable. If response == 1 and then warning "Upload successfully." message otherwise, warning "File non uploaded." message.

Laissez passer formData object with send() method.

Completed Code

// Upload file role uploadFile() {     var files = document.getElementById("file").files;     if(files.length > 0 ){        var formData = new FormData();       formData.append("file", files[0]);        var xhttp = new XMLHttpRequest();        // Ready Mail method and ajax file path       xhttp.open("POST", "ajaxfile.php", true);        // telephone call on request changes country       xhttp.onreadystatechange = function() {          if (this.readyState == four && this.status == 200) {             var response = this.responseText;            if(response == 1){               alert("Upload successfully.");            }else{               alert("File not uploaded.");            }          }       };        // Ship request with data       xhttp.transport(formData);     }else{       alert("Please select a file");    }  }