Question

$('[name="thumbnail"]').on('change', function() {
     $('img.preview').prop('src', this.value);
});

<input name="thumbnail" placeholder="Post image URL here" />
<br />
<img src="http://webspace.webring.com/people/jv/vladilyich/preview.gif" class="preview" />

我正在寻找像js小提琴例子一样的工作方式。但只有我想让它工作，如果用户输入img5.jpg，例如，保存在与index.html文件夹相同的目录中的桌面上的图像

Answer 1

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Image preview</title>
	<link rel="stylesheet" href="">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

	<script type="text/javascript">
		jQuery(document).ready(function($) {
			
			$('#imgName').bind('input', function() {
			    $('#imageHolder').attr('src', $(this).val()); //concatinate path if required
			});

		});
	</script>
</head>
<body>
	<input type="text" name="" id="imgName" value="" placeholder="Input image name"><br><br>
	<img name="imageHolder" id="imageHolder" src="http://i.imgur.com/zAyt4lX.jpg">
</body>
</html>

如何输入图像网址并获取图像预览

1 个答案: