Image file preview before upload using css
Uploading Image file to the webserver is very common. We use HTML file type input for file upload, by default HTML file upload control doesn’t preview file. But if you want to show selected image file preview before upload and select only image file. Then this post is a complete solution for this. So enjoy coding with Girfa Student Help blog.
<html>
<head>
<title>Preview file before upload</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.fileUpload {
position: relative;
overflow: hidden;
margin-top: 0px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
<script>
A programmer and Founder of Girfa
IT Services, working from 2009.At Starting computer teaching was my full-time job but after 10 years of teaching I chose to programming as a full-time job and teaching become part-time. In real life, I am very lazy and I made it my coding style I always try to make a reusable component that’s my USP for programming which saves my time and extra working both.
