Replace input type file by Icon/Image | Display image uploaded below icon or image | Jquery
In this video , you will be able to change input type file with icon or image.
How to change the default text 'Choose file' of an input type="file"
Steps:
Create a input type file
Create a label for image
Inside label, include icon or image
define for attribute in label
create a div for displaying image uploaded
define onchange on input and get the value of image uploaded
in jquery script, define function and get the value and display the name to the div defined
label for="firstimg"
img src="download.png" width="100" height="100" style="cursor: pointer;"
i class="fa fa-plus" style="font-size: 24px;border: 1px solid black;padding: 25px;cursor: pointer;"
/label
input type="file" name="" id="firstimg" style="display: none;visibility: none;" onchange="getImage(this.value);"
In script
function getImage(imagename)
{
var newimg=imagename.replace(/^.*\\/,"");
$('#display-image').html(newimg);
}
#jquery #knowledgethrusters
