How to upload form data and image file using Ajax
Welcome back to shortlearner.com, today in this post we will see how to store user information and photo into MySQL database using Ajax JQuery and PHP. in our previous post we learn how to force fully download a file from the server with the help of php.
so before start this tutorial we should take an overview of the scenario of the post.
we are designing a responsive signup form with username, email and multiple file options with the help of HTML, CSS and Bootstrap.
<!DOCTYPE html>
<html>
<head>
<title></title>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Status message -->
<div class="statusMsg"></div>
<!-- File upload form -->
<div class="col-lg-12">
<form id="fupForm" enctype="multipart/form-data">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter name" required />
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email" required />
</div>
<div class="form-group">
<label for="file">Files</label>
<input type="file" class="form-control" id="file" name="files[]" multiple />
</div>
<input type="submit" name="submit" class="btn btn-success submitBtn" value="SUBMIT"/>
</form>
</div>
</body>
</html>
after submission of the form we will call a AJAX request with the help of JQuery, and we will send all the form information into our signup.php.
<script>
$(document).ready(function(){
// Submit form data via Ajax
$("#fupForm").on('submit', function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: 'signup.php',
data: new FormData(this),
dataType: 'json',
contentType: false,
cache: false,
processData:false,
beforeSend: function(){
$('.submitBtn').attr("disabled","disabled");
$('#fupForm').css("opacity",".5");
},
success: function(response){
alert(response);
$('.statusMsg').html('');
if(response.status == 1){
$('#fupForm')[0].reset();
$('.statusMsg').html('<p class="alert alert-success">'+response.message+'</p>');
}else{
$('.statusMsg').html('<p class="alert alert-danger">'+response.message+'</p>');
}
$('#fupForm').css("opacity","");
$(".submitBtn").removeAttr("disabled");
}
});
});
// File type validation
var match = ['application/pdf', 'application/msword', 'application/vnd.ms-office', 'image/jpeg', 'image/png', 'image/jpg'];
$("#file").change(function() {
for(i=0;i<this.files.length;i++){
var file = this.files[i];
var fileType = file.type;
if(!((fileType == match[0]) || (fileType == match[1]) || (fileType == match[2]) || (fileType == match[3]) || (fileType == match[4]) || (fileType == match[5]))){
alert('Sorry, only PDF, DOC, JPG, JPEG, & PNG files are allowed to upload.');
$("#file").val('');
return false;
}
}
});
});
</script>
in signup.php we will creating a database connection and also validate the form data and file’s extension as well.
if file extension will pdf,JPG,JPEG and png than it will allow for further request otherwise the error will show on the user’s screen.
<?php
$db = mysqli_connect("localhost","root","rootroot","rk200");
$uploadDir = 'img/';
$allowTypes = array('pdf', 'doc', 'docx', 'jpg', 'png','PNG', 'jpeg');
$response = array(
'status' => 0,
'message' => 'Form submission failed, please try again.'
);
// If form is submitted
$errMsg = '';
$valid = 1;
if(isset($_POST['name']) || isset($_POST['email']) || isset($_POST['files'])){
// Get the submitted form data
$name = $_POST['name'];
$email = $_POST['email'];
$filesArr = $_FILES["files"];
$uploadStatus = 1;
$fileNames = array_filter($filesArr['name']);
// Upload file
$uploadedFile = '';
if(!empty($fileNames)){
foreach($filesArr['name'] as $key=>$val){
// File upload path
$fileName = rand(5000,6000).basename($filesArr['name'][$key]);
$targetFilePath = $uploadDir . $fileName;
// Check whether file type is valid
$fileType = pathinfo($targetFilePath, PATHINFO_EXTENSION);
if(in_array($fileType, $allowTypes)){
// Upload file to server
if(move_uploaded_file($filesArr["tmp_name"][$key], $targetFilePath)){
$uploadedFile .= $fileName.',';
}else{
$uploadStatus = 0;
$response['message'] = 'Sorry, there was an error uploading your file.';
}
}else{
$uploadStatus = 0;
$response['message'] = 'Sorry, only PDF, DOC, JPG, JPEG, & PNG files are allowed to upload.';
}
}
}
if($uploadStatus == 1){
// Include the database config file
// Insert form data in the database
$uploadedFileStr = trim($uploadedFile, ',');
$insert = $db->query("INSERT INTO user2 (username,email,password,img) VALUES ('".$name."','123456','".$email."', '".$uploadedFileStr."')");
if($insert){
$response['status'] = 1;
$response['message'] = 'Form data submitted successfully!';
}
}
}
// Return response
echo json_encode($response);
?>If user upload multiple files than we use foreach loop and check extension of each and every file and convert there into a unique name via using predefined PHP rand() function.
now after that process we will simply move all the files into our defined path and Insert all the data into database applying insert query and store all the data into our user table.
Also Read
How to Install PHP on CentOS.
How to Send Attachment on mail using PHP.
PHP Login Script With Remember me.
Unable to create a directory a wordpress error
How to integrate Razorpay Payment Gateway using PHP.
Change password using javascript, php and mysqli.
Password and Confirm Password Validation Using JavaScript