Replace input type file by Icon/Image | Display image uploaded below icon or image | Jquery

Published: 03 January 2021
on channel: Knowledge Thrusters

40,906

484

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

Watch video Replace input type file by Icon/Image | Display image uploaded below icon or image | Jquery online without registration, duration hours minute second in high quality. This video was added by user Knowledge Thrusters 03 January 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 40,906 once and liked it 484 people.

4,408