How to make a button display the value of a file/image? Javascript

Question

I have a button called f1 and I want it to display the value of the image that the user puts when they select an image. For example, when you select an image it'll display on the screen but I also want it to display on the button with proper width and height attributes, how would I do that? I've tried the document.getElementById("f1").innerHTML = input.value; but that only displays the file path, not the actual image. I appreciate the help.

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#img')
                    .attr('src', e.target.result)
                    .width(250)
                    .height(200);
					
				
            };
			reader.readAsDataURL(input.files[0]);
			const f1 = document.getElementById("f1").innerHTML = input.value;

            
			
        }
    }

#f1 {
		width:50px;
		height:40px;
	}
	#img {
		position:relative;
		left:275px;
		top:200px;
	}

<!DOCTYPE html>
<html>
<head>
	<title>Filter Image</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>

<body>
 <input type='file' id="file" onchange="readURL(this);" accept="image/gif, image/jpeg, image/png">
    <img id="img"/>
	<button id = "f1"></button>
</body>
</html>

Do you want to navigate another page or doing something when clicking that image? — Dhanushka sasanka
– Dhanushka sasanka, Commented Sep 21, 2019 at 17:48
Yes, when a user clicks the button the filter should change on the image. I can do that myself though. — Love2Code
– Love2Code, Commented Sep 21, 2019 at 17:57

abhi.s · Accepted Answer · 2019-09-21 17:49:58Z

1

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#img')
                    .attr('src', e.target.result)
                    .width(50)
                    .height(50);
					
				
            };
			reader.readAsDataURL(input.files[0]);
			 }
    }

<!DOCTYPE html>
<html>
<head>
	<title>Filter Image</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>

<body>
 <input type='file' id="file" onchange="readURL(this);" accept="image/gif, image/jpeg, image/png">
    
	<button id = "f1"><img id="img"/></button>
</body>
</html>

answered Sep 21, 2019 at 17:49

abhi.s

113 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

abhi.s Over a year ago

put the img tag inside button

Love2Code Over a year ago

Thanks but I want it to display on the button and the screen, not just on the button.

Dhanushka sasanka Over a year ago

you can add the button in a <a href ="your link "> <img src= "your image path"></a> .

Collectives™ on Stack Overflow

How to make a button display the value of a file/image? Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related