如何输入图片网址并获得图片预览 [英] How can i enter an image url and get an image preview
本文介绍了如何输入图片网址并获得图片预览的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
$('[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文件夹相同的目录中
i'm looking for something to work like the js fiddle example. but only i want it to work if a user were to enter img5.jpg for example, an image saved on desktop in the same directory as the index.html folder
推荐答案
<!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>
这篇关于如何输入图片网址并获得图片预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
