Skip to content

All topics  /  MySQL

PHP 8 File Upload using Ajax and MySQL Database Example

MySQL ·

Teams applying “PHP 8 File Upload using Ajax and MySQL Database Example” in a production project can use more details are available here to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official MySQL website and test it against the project’s actual database and runtime.

Hello Friends,

This post will give you example of PHP 8 File Upload using Ajax MySQL Database Example. I explained simply step by step How to Upload file using ajax jQuery PHP 8 and MySQL. This tutorial will give you simple example of PHP 8 Upload & Store File in MySQL Tutorial. I explained simply step by step ajax file upload php 8 Code Example.

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:

index.php


<!DOCTYPE html>
<html lang="en">
<head>
    <title>PHP 8 File Upload using Ajax and MySQL Database Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <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>PHP 8 File Upload using Ajax and MySQL Database Example - Nicesnippets.com</h4>
                    </div>
                    <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
                        </div>
                        <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>
                            <div class="form-group d-flex justify-content-center">
                                <button type="submit" name="upload" class="btn btn-primary">Upload</button>
                            </div>  
                        </form>         
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            $("input").prop('required',true);
            $('#file').change(function () {
                var ext = this.value.match(/\.(.+)$/)[1];
                    switch (ext) {
                        case 'txt':
                        case 'pdf':
                        case 'docx':
                        case 'csv':
                        case 'xlsx':
                            $('#error').text("");
                            $('button').attr('disabled', false);
                            break;
                    default:
                        $('#error').text("File must be of type txt,pdf,docx,csv,xlsx.");
                        $('button').attr('disabled', true);
                        this.value = '';
                }
            });
            $("#submitForm").on("submit", function(e){
                e.preventDefault();
                $.ajax({
                    url  :"store.php",
                    type :"POST",
                    cache:false,
                    contentType : false, // you can also use multipart/form-data replace of false
                    processData : false,
                    data: new FormData(this),

                    
                    success:function(response){
                      $("#success").show();
                      $("#success").fadeOut(2800);
                    }
                });
            });
        });
    </script>
</body>
</html>

store.php 

<?php 
    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 " ";
        }else{
            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>";
        }else{
            echo "<h5 class='alert alert-primary'>File Was Not inserted!</h5>";
        }
    }
?>

Output:

It will help you...

More on this topic