How to Upload Files on Server using Ajax in PHP 8?

Published On: 07/06/2022 | Category: PHP PHP 8

Hello Friends,

This tutorial will provide example of how to upload files on server using ajax in php 8?. if you have question about PHP 8 File Upload using Ajax MySQL Database Example then I will give simple example with solution. you can see How to Upload file using ajax jQuery PHP 8 and MySQL. this example will help you PHP 8 Upload & Store File in MySQL Tutorial.

This article will give you simple example of How to Insert Files into a MySQL Database Using PHP 8

So, let's see bellow solution:

<!DOCTYPE html>
<html lang="en">
    <title>How to Upload Files on Server using Ajax in PHP 8?</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <script src=""></script>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12">
                <div class="card m-auto w-75">
                    <div class="card-header text-center text-white bg-dark">
                        <h4>How to Upload Files on Server using Ajax in PHP 8? -</h4>
                    <div class="card-body">
                        <div class="alert alert-success alert-dismissible" id="success" style="display: none;">
                            <button type="button" class="close" data-dismiss="alert">×</button>
                                File uploaded successfully
                        <form id="submitForm">
                            <div class="form-group">
                                <label><strong>Select File : </strong><span class="text-danger"> *</span></label>
                                <input type="file" class="form-control" name="file" id="file" multiple>
                             <span id="error" class="text-danger"></span><br>    
                            <div class="form-group d-flex justify-content-center">
                                <button type="submit" name="upload" class="btn btn-primary">Upload</button>
    <script type="text/javascript">
            $('#file').change(function () {
                var ext = this.value.match(/\.(.+)$/)[1];
                    switch (ext) {
                        case 'txt':
                        case 'pdf':
                        case 'docx':
                        case 'csv':
                        case 'xlsx':
                            $('button').attr('disabled', false);
                        $('#error').text("File must be of type txt,pdf,docx,csv,xlsx.");
                        $('button').attr('disabled', true);
                        this.value = '';
            $("#submitForm").on("submit", function(e){
                    url  :"store.php",
                    type :"POST",
                    contentType : false, // you can also use multipart/form-data replace of false
                    processData : false,
                    data: new FormData(this),

    if (isset($_FILES['file'])) {
        $file_name = $_FILES['file']['name'];    
        $file_size = $_FILES['file']['size'];    
        $file_tmp = $_FILES['file']['tmp_name'];     
        $file_type = $_FILES['file']['type'];        

        $servername = "localhost";
        $username = "root";
        $password = "";
        $dbname = "tests";

        $conn = mysqli_connect($servername, $username, $password, $dbname);

        if (!$conn) {
            die("connection failed:" .mysqli_connect_error());
            echo "connection successfull";
        $sql="INSERT INTO posts(file) VALUES('$file_name')";
        if ($conn->query($sql)===TRUE) {
            echo " ";
            echo "<h5 class='alert alert-primary'>Error :".$sql."<br>".$conn->error."</h5>";
        if (move_uploaded_file($file_tmp ,"uploads/".$file_name)) {
            echo "<h5 class='alert alert-primary'>File inserted Successfully!</h5>";
            echo "<h5 class='alert alert-primary'>File Was Not inserted!</h5>";
Output: It will help you...