Home Web Development JavaScript Image Upload With Preview Using jQuery and CSS | Custom File Input

Image Upload With Preview Using jQuery and CSS | Custom File Input

May 5, 2020

16644

How we can create a custom file input to upload and preview images? Solution: See this Image Upload With Preview Using jQuery and CSS, Custom File Input Image.

Previously I have shared few file input programs, but this program is about preview the selected image. Basically, HTML comes with many types of inputs like text, password, email, etc and all these inputs are for forms. There is input type “file” which is for uploading a file, we just have to put <input type="file"> tag to creating this. By default, it comes with basic styles but we can customize its style and function using JS and CSS.

Today you will learn to create Custom File Input Image preview. Basically, there is a dummy image placeholder and a file input below the image. When you will click on the input for uploading an image, the file explorer will open. After selecting an image, the dummy placeholder will replace it with the selected image. Also, there is a little text animation while image loading.

So, Today I am sharing Image Upload With Preview Using jQuery and CSS. There I have placed call and ID names in the elements and styled that using CSS. And all the functions are based on jQuery, there I have used this library to fewer codes and save time. This is a complete program, you can use this on select profile pic upload photo section on your website.

If you are thinking now how this image upload and preview program actually is, then see the preview given below.

Preview Of Custom File Input For IMG Uploading

See this video preview to getting an idea of how this custom file input looks like.

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

Image Upload With Preview Using jQuery and CSS Source Code

Before sharing source code, let’s talk about it. First I have created a main div named container as always and placed all elements inside it. Inside the main div, I have created a form and placed a div for loading text, another div with an IMG tag for preview, and a file input with label inside it. I have placed ID and class names inside every tag for styling and functioning. Also in the HTML file, I have linked external files like CSS, JS, and jQuery CDN.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. There is a bounce effect when program loading and on refresh which is based on a library. WIth CSS first I have done basics works, gave elements values like size, position, margin, padding, etc. I have used CSS @Keyframe command to creating the blink text animation when image loading.

jQuery handling here the image upload and preview feature in this program. Fetched the elements using ID name $("#IDname") method and created functions on click using .on('click',function() ) command. Also, jQuery showing and hiding the alert or blinking text when loading by adding and removing class names.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second file for CSS, and the third file for JavaScript. Follow the steps to creating this without any trouble.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Image Upload Preview | Webdevtrick.com</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css'>
<link rel="stylesheet" href="./style.css">

</head>
<body>
  
<div class="container animated bounce">
<form id="form1" runat="server">
    <div class="alert"></div>
    <div id='img_container'><img id="preview" src="https://webdevtrick.com/wp-content/uploads/preview-img.jpg" alt="your image" title=''/></div> 
    <div class="input-group"> 
    <div class="custom-file">
    <input type="file" id="inputGroupFile01" class="imgInp custom-file-input" aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
</div>
</form>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script  src="./function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Image Upload Preview | Webdevtrick.com</title>

</head>

<body>

<label class="custom-file-label" for="inputGroupFile01">Choose file</label>

</div>

</form>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

.container{
  margin-left:auto;
  margin-right:auto;  
  margin-top:calc(calc(100vh - 405px)/2);
}
#form1{
  width:auto;
}
.alert{
  text-align:center;
}

#preview{  
  max-height:256px;
  height:auto;
  width:auto;
  display:block;
  margin-left: auto;
   margin-right: auto;
  padding:5px;
}
#img_container{
  border-radius:5px;
  margin-top:20px;
  width:auto;  
}
.input-group{  
  margin-left:calc(calc(100vw - 100%)/2);
  margin-top:40px;
  width:320px;
}
.imgInp{  
  width:150px;
  margin-top:10px;
  padding:10px;
  background-color:#d3d3d3;  
}
.loading{
   animation:blinkingText ease 2.5s infinite;
}
@keyframes blinkingText{
    0%{     color: #000;    }     
    50%{   color: #transparent; }
    99%{    color:transparent;  }
    100%{ color:#000; }
}
.custom-file-label{
  cursor:pointer;
}

.container{

margin-left:auto;

margin-right:auto;

margin-top:calc(calc(100vh - 405px)/2);

}

#form1{

width:auto;

}

.alert{

text-align:center;

}

#preview{

max-height:256px;

height:auto;

width:auto;

display:block;

margin-left: auto;

margin-right: auto;

padding:5px;

}

#img_container{

border-radius:5px;

margin-top:20px;

width:auto;

}

.input-group{

margin-left:calc(calc(100vw - 100%)/2);

margin-top:40px;

width:320px;

}

.imgInp{

width:150px;

margin-top:10px;

padding:10px;

background-color:#d3d3d3;

}

.loading{

animation:blinkingText ease 2.5s infinite;

}

@keyframes blinkingText{

0%{ color: #000; }

50%{ color: #transparent; }

99%{ color:transparent; }

100%{ color:#000; }

}

.custom-file-label{

cursor:pointer;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
$("#inputGroupFile01").change(function(event) {  
  RecurFadeIn();
  readURL(this);    
});
$("#inputGroupFile01").on('click',function(event){
  RecurFadeIn();
});
function readURL(input) {    
  if (input.files && input.files[0]) {   
    var reader = new FileReader();
    var filename = $("#inputGroupFile01").val();
    filename = filename.substring(filename.lastIndexOf('\\')+1);
    reader.onload = function(e) {
      debugger;      
      $('#preview').attr('src', e.target.result);
      $('#preview').hide();
      $('#preview').fadeIn(500);      
      $('.custom-file-label').text(filename);             
    }
    reader.readAsDataURL(input.files[0]);    
  } 
  $(".alert").removeClass("loading").hide();
}
function RecurFadeIn(){ 
  console.log('ran');
  FadeInAlert("Wait for it...");  
}
function FadeInAlert(text){
  $(".alert").show();
  $(".alert").text(text).addClass("loading");  
}

// Code By Webdevtrick ( https://webdevtrick.com )

$("#inputGroupFile01").change(function(event) {

RecurFadeIn();

readURL(this);

});

$("#inputGroupFile01").on('click',function(event){

RecurFadeIn();

});

function readURL(input) {

if (input.files && input.files[0]) {

var reader = new FileReader();

var filename = $("#inputGroupFile01").val();

filename = filename.substring(filename.lastIndexOf('\\')+1);

reader.onload = function(e) {

debugger;

$('#preview').attr('src', e.target.result);

$('#preview').hide();

$('#preview').fadeIn(500);

$('.custom-file-label').text(filename);

}

reader.readAsDataURL(input.files[0]);

}

$(".alert").removeClass("loading").hide();

}

function RecurFadeIn(){

console.log('ran');

FadeInAlert("Wait for it...");

}

function FadeInAlert(text){

$(".alert").show();

$(".alert").text(text).addClass("loading");

}

That’s It. Now you have successfully created Image Upload With Preview Using jQuery and CSS, Custom File Input Image program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

8 COMMENTS

Swarnava Chaudhury January 30, 2020 At 11:12 am

this process is not working…

Reply
- shaan January 30, 2020 At 1:28 pm
  
  tell me the problem you are facing?
  
  Reply
  - Anonymous April 20, 2020 At 6:52 am
    
    The code has an issue. You asked to save the js file with the name “function.js” but inside the html file, you’ve called the script with “Script.js” file. If you fix that, the code works fine.
    
    Reply
AMIR July 6, 2020 At 2:20 pm

Great. Thank a lot

Reply
abdul rojak saputra April 20, 2021 At 4:38 pm

selamat malam gan itu untuk nge save file/img nya gmn gan.
terima kasih

Reply
Meman May 16, 2021 At 4:14 pm

How to I call an external file which takes care of the server side upload?

Reply
siddique September 18, 2021 At 10:42 am

what if you want to also show the image width and height onload, what you have to do then?

Reply
tanvir islam baizid December 20, 2021 At 5:21 pm

lol bro

Reply