Ajax File Upload With Input Field in PHP
In This Blog, We Will Learn How to Upload File without refresh page with help of Ajax. Ajax File Upload With Php is used to upload file without refeshing page.
We can use ajax file upload in many types of form like: profile image upload, resume upload etc.
Lets See
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ajax File Upload With Php</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Ajax File Upload With PHP</h2>
<div class="mb-3 mt-3">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter Name" >
</div>
<div class="mb-3">
<label for="email">Email:</label>
<input type="text" class="form-control" id="email" placeholder="Enter Email" >
</div>
<div class="mb-3">
<label for="pwd">File:</label>
<input type="file" class="form-control" id="file" >
</div>
<button type="button" id="submit" class="btn btn-success">Save Data</button>
</div>
</body>
</html>
Jquery CODE:
<script>
$(document).ready(function(){
$("#submit").click(function(){
$name=$("#name").val();
$email=$("#email").val();
$file=$("#file")[0].files[0]; //////JQuery syntax for select file
// $file=document.getElementById("file").files[0]; ////////javascript syntax for select file
$form=new FormData();
$form.append("name",$name);
$form.append("email",$email);
$form.append("file",$file);
/////ajax code for file upload
$.ajax({
url:'upload.php',
method:"post",
enctype:"multipart/form-data",
processData: false,
contentType: false,
data:$form,
success:function(response){
alert(response);
console.log(response);
},
error: function (xhr, status, err, data){
console.log(xhr);
console.log(status);
console.log(err);
console.log(data);
}
})
});
});
</script>
PHP CODE:
<?php
if(isset($_POST['name']) && isset($_POST['email'])){
$name=$_POST['name'];
$email=$_POST['email'];
$file_name=$_FILES['file']['name'];
$tmp_name=$_FILES['file']['tmp_name'];
$path="uploads/".$file_name; //////folder name or path where to save file
////////upload file code php
$upload= move_uploaded_file($tmp_name, $path);
//////////if you want save database code here
print_r($_POST);
if($upload){
echo "File Uploaded Successfully";
} else{
echo "File Not Uploaded";
}
}
else{
echo "Something went wrong";
}
?>
Complete Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ajax File Upload With Php</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Ajax File Upload With PHP</h2>
<div class="mb-3 mt-3">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter Name" >
</div>
<div class="mb-3">
<label for="email">Email:</label>
<input type="text" class="form-control" id="email" placeholder="Enter Email" >
</div>
<div class="mb-3">
<label for="pwd">File:</label>
<input type="file" class="form-control" id="file" >
</div>
<button type="button" id="submit" class="btn btn-success">Save Data</button>
</div>
<script>
$(document).ready(function(){
$("#submit").click(function(){
$name=$("#name").val();
$email=$("#email").val();
$file=$("#file")[0].files[0]; //////JQuery syntax for select file
// $file=document.getElementById("file").files[0]; ////////javascript syntax for select file
$form=new FormData();
$form.append("name",$name);
$form.append("email",$email);
$form.append("file",$file);
/////ajax code for file upload
$.ajax({
url:'upload.php',
method:"post",
enctype:"multipart/form-data",
processData: false,
contentType: false,
data:$form,
success:function(response){
alert(response);
console.log(response);
},
error: function (xhr, status, err, data){
console.log(xhr);
console.log(status);
console.log(err);
console.log(data);
}
})
});
});
</script>
</body>
</html>
file upload with php and jquery successfully done
