Embedded Files
Here I will mention the code for form submission with file and other data input-without page refresh, By using jquery we can simply achieve that.
1 . index.html page
<!DOCTYPE html>
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></head>
<body>
<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>
<input type="submit" name="submit" class="btn btn-danger submitBtn" value="SAVE"/>
</form>
<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){
$('.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>
</body>
</html>
2. submit.php
<?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["hard_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;
echo "ok";
}
}
}
}
?>
3. please make a folder named uploads inside this file.
Page updated
Google Sites
Report abuse