1. index.html – Frontend HTML with Ajax
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ajax File Upload</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#fupForm").on('submit', function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: 'submit.php',
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
beforeSend: function(){
$('.submitBtn').attr("disabled", "disabled");
$('#fupForm').css("opacity", ".5");
},
success: function(msg){
$('.statusMsg').html('');
if(msg === 'ok'){
$('#fupForm')[0].reset();
$('.statusMsg').html('<span class="text-success">Form data submitted successfully.</span>');
} else {
$('.statusMsg').html('<span class="text-danger">Some problem occurred, please try again.</span>');
}
$('#fupForm').css("opacity", "");
$(".submitBtn").removeAttr("disabled");
}
});
});
// Validate file type
$("#file").change(function(){
var file = this.files[0];
var imagefile = file.type;
var allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
if (!allowedTypes.includes(imagefile)) {
alert('Please select a valid image file (JPEG/JPG/PNG).');
$("#file").val('');
return false;
}
});
});
</script>
</head>
<body>
<div class="container mt-3">
<h2>Ajax File Upload with Form Data</h2>
<p class="statusMsg"></p>
<form enctype="multipart/form-data" id="fupForm">
<div class="form-group mb-3">
<label for="name">NAME</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter name" required>
</div>
<div class="form-group mb-3">
<label for="email">EMAIL</label>
<input type="email" class="form-control" name="email" id="email" placeholder="Enter email" required>
</div>
<div class="form-group mb-3">
<label for="file">File</label>
<input type="file" class="form-control" name="file" id="file" required>
</div>
<input type="submit" name="submit" class="btn btn-danger submitBtn" value="SAVE">
</form>
</div>
</body>
</html>
2. Create MySQL Table
Run the following SQL command to create your table:
CREATE TABLE IF NOT EXISTS `form_data` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`file_name` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
3. dbConfig.php – Database Configuration
<?php
// DB details
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = 'root';
$dbName = 'semicolan';
// Create connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
// Check connection
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}
?>
4. Create an uploads/ Folder
Make sure to create a directory named uploads in your project folder where the uploaded files will be stored:
mkdir uploads
chmod 755 uploads
5. submit.php – Handle File Upload and Save to DB
<?php
if(!empty($_POST['name']) && !empty($_POST['email']) && !empty($_FILES['file']['name'])){
$uploadedFile = '';
if(!empty($_FILES["file"]["type"])){
$fileName = time() . '_' . $_FILES['file']['name'];
$valid_extensions = array("jpeg", "jpg", "png");
$temporary = explode(".", $_FILES["file"]["name"]);
$file_extension = end($temporary);
if((in_array($_FILES["file"]["type"], ["image/png", "image/jpg", "image/jpeg"])) && in_array($file_extension, $valid_extensions)){
$sourcePath = $_FILES['file']['tmp_name'];
$targetPath = "uploads/" . $fileName;
if(move_uploaded_file($sourcePath, $targetPath)){
$uploadedFile = $fileName;
}
}
}
$name = $_POST['name'];
$email = $_POST['email'];
// Include database configuration file
include_once 'dbConfig.php';
// Insert form data into the database
$insert = $db->query("INSERT INTO form_data (name, email, file_name) VALUES ('$name', '$email', '$uploadedFile')");
echo $insert ? 'ok' : 'err';
}
?>
Final Notes
-
Ensure your server allows file uploads and your PHP
upload_max_filesizesetting is sufficient. -
Always validate and sanitize inputs in a production environment.
-
For better security, consider restricting file size and scanning uploads.
