Output
Hey developers , in this tutorial you will learn how to upload file using AJAX Jquery . Basically ajax is a method to send request in backend with reloading the whole page .
Storing an image file in backend requires an file input in html , some styling with css and if you want some animations you can use Javascript .
Jquery is a javascript library , it is mainly used for DOM and ajax is a jquery method used to send request in backend . In javascript ajax is known as xmlHttpRequest .
Contents
- HTML
- CSS
- jquery
- PHP
- Conclusion
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Upload file</title>
</head>
<body>
<div class="container">
<div class="row d-flex justify-content-center align-items-center" >
<div class="col-md-6 my-5 d-flex justify-content-start align-items-center flex-column" >
<img src="" alt="" class = "mb-3 show_image" />
<div class="file_upload">
<input type="file" name="file" id="fileInput">
<button class = "uploadButton" >Upload</button>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
In the above code block img tag is used to show the uploaded image file , and tag is used to choose for image file to be uploaded .
CSS File
.row{
width:100%;
}
.col-md-6{
width:500px;
height:300px;
border-radius: 10px;
overflow: hidden;
}
img{
width:95%;
height:80%;
}
Write the above code in a seprate css file and link it with the html file .
Jquery code
Before writing jquey code , include jquery’s cdn link into your html file
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Then after write the below jquery code in script tag below jquery linkage into your html file.
$(document).ready(function(){
$(".uploadButton").click(function(){
var fd = new FormData();
var files = $('#fileInput')[0].files;
// console.log(files);
// Check file selected or not
if(files.length > 0 ){
fd.append('file',files[0]);
$.ajax({
url: 'upload.php',
type: 'post',
data: fd,
success: function(response){
if(response){
$(".show_img").attr("src",response);
}else{
console.log('file not uploaded');
}
},
});
}else{
alert("Please select a file.");
}
});
});
In the above jquery code we have used FormData() to upload file in backend . After successful uploading of file we are showing it into image tag .
Read Full Article here 👉 https://bepractical.tech/how-to-upload-file-with-ajax-jquery-simplest-method/
Top comments (0)