Как сделать так, чтобы кнопка отображала значение файла / изображения?Javascript - PullRequest
Новая
       39

Как сделать так, чтобы кнопка отображала значение файла / изображения?Javascript

0 голосов
/ 21 сентября 2019

У меня есть кнопка с именем f1, и я хочу, чтобы она отображала значение изображения, которое пользователь помещает при выборе изображения.Например, когда вы выбираете изображение, оно будет отображаться на экране, но я также хочу, чтобы оно отображалось на кнопке с надлежащими атрибутами ширины и высоты, как мне это сделать?Я пробовал document.getElementById ("f1"). InnerHTML = input.value;но это только показывает путь к файлу, а не фактическое изображение.Я ценю помощь. 

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>

1 Ответ

1 голос
/ 21 сентября 2019 

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>
...