Ajax File Upload with Form Data PHP

Ajax File Upload with Form Data PHP

              

Ajax File Upload with Form Data






1. index.html

<!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(e){
			$("#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){ console.log(msg);
						$('.statusMsg').html('');
						if(msg == 'ok'){
							$('#fupForm')[0].reset();
							$('.statusMsg').html('<span style="font-size:18px;color:#34A853">Form data submitted successfully.</span>');
						}else{
							$('.statusMsg').html('<span style="font-size:18px;color:#EA4335">Some problem occurred, please try again.</span>');
						}
						$('#fupForm').css("opacity","");
						$(".submitBtn").removeAttr("disabled");
					}
				});
			});
		
			//file type validation
			$("#file").change(function() {
				var file = this.files[0];
				var imagefile = file.type;
				var match= ["image/jpeg","image/png","image/jpg"];
				if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2]))){
					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">
				<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">File</label>
				<input type="file" class="form-control" id="file" name="file" required />
			</div>
			<br>
			<input type="submit" name="submit" class="btn btn-danger submitBtn" value="SAVE"/>
		</form>
	</div>

</body>
</html>

2. Add DB

CREATE TABLE IF NOT EXISTS `form_data` (
  `id` int(11) NOT NULL,
  `name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `email` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `file_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

3. DB Connection

<?php
//DB details
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = 'root';
$dbName = 'semicolan';

//Create connection and select DB
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

if($db->connect_error){
    die("Unable to connect database: " . $db->connect_error);
}

4. Create folder upload

folder: upload

5. Submit data

<?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((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "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 in the database
    $insert = $db->query("INSERT form_data (name,email,file_name) VALUES ('".$name."','".$email."','".$uploadedFile."')");
    // echo $insert; die();
    
    echo $insert?'ok':'err';
}
Reactions

Post a Comment

2 Comments

  1. ចុះបើចង់ update file ហ្នឹងវិញ admin ត្រូវបន្ថែមអ្វីទៀត

    ReplyDelete

CAN FEEDBACK

Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)

close