PHP 8 File Upload using Ajax and MySQL Database Example

Jun 07, 2022

.

Admin

PHP 8 File Upload using Ajax and MySQL Database Example

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...

#PHP 8