从TEXT BOX中获得的url加载DIV中的图像
Load image in DIV from url obtained from a TEXT BOX
我正在尝试从文本框中获得的url将图像加载到div标记中。我当前的文件如下。。我不知道还能做什么
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<div class="ImageContainer">
image will appear here:
</div>
</body>
</html>
使用纯javascript可以按如下方式加载图像。我正在使用onChange事件来检测url是否已提供给文本框。按Enter键后,图像将加载到分区中
function addImage()
{
var url = document.getElementsByClassName("imageURL1")[0].value;
var image = new Image();
image.src = url;
document.getElementsByClassName("ImageContainer")[0].appendChild(image);
}
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1" onChange="addImage();">
<div class="ImageContainer">
image will appear here:
</div>
</body>
</html>
您可以尝试这样的方法。
$(document).ready(function(){
$("#Submit").click(function(){
var image_url = $(".imageURL1").val();
$(".ImageContainer").html("<img src='"+image_url+"' width='200'>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="imageURL1">
<button id="Submit">Submit</button>
<div class="ImageContainer">
</div>
Js小提琴示例->http://jsfiddle.net/0kvxpnmv/
$('<img src="'+image_url+'">').load(function() {
$(this).appendTo('.ImageContainer');
});
JS Fiddle
使用php
index.php file
<form action="GetURL.php" method="post">
<input type="text" name="url">
<input type="submit">
</form>
现在,当他们点击提交时,它将带你进入新页面
GetURL.php
$image_url = $_REQUEST['url'];
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<div class="ImageContainer">
<?php echo '<img src="{$image}"/>'; ?>
</div>
</body>
</html>
在这个页面上,你可以看到在你的imageContainer class
中,你有用PHP
发布的图像url
从这里处理这个问题的最好方法是将表单与图像放在同一页面上,并让它用ajax发布url。
因此,您可以在文本框中键入url,完成后会刷新图像url。
使用一个按钮来调用一个函数,该函数将在文本框中使用url更改图像src
HTML
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<button onclick="func()">Load image</button>
<div class="ImageContainer">
<img src="" id="imgContainer">
</div>
</body>
</html>
javascript
(function(){
var func = function(){
var url = $(".imageURL1").val()
$('#imgContainer').attr('src',url)
}
})();
这是带有jQuery和不带有jQuery的jsFiddle
请参阅下面的代码,在文本输入的更改事件上,它会创建一个jQuery img标记,然后添加,然后使用输入的URL作为源,并清除输出div的内容。一旦加载图像,它将替换输出div的内容。
$('.imageURL1').change(function() {
var $img = $('<img/>');
$img.attr('src', $(this).val());
$img.load(function() {
$('.ImageContainer').html(this);
});
});
此解决方案需要jQuery。
在这里拉小提琴。
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- ajax外部url加载完成后调用jquery函数
- 如何使用JavaScript通过URL加载页面内容
- PhantomJS未从同一URL加载.js
- 正在从oAuth后面的URL加载图像
- Fabric js从url加载svg缺少属性
- Javascript;html:有没有一种方法可以找到一个顶级的命名窗口(或选项卡)并将其带到前台,而不是将url加载到
- 将URL加载到CSS动画滑动iframe中
- 借助JS/Jquery函数,通过其URL加载youtube视频
- 我的Javascript没有'当我把一个脚本元素放在头上从URL加载它时,它不起作用
- 将Parse.File url加载到EJS模板中
- 打开一个模态(在Codeigniter中),该模态从依赖于phpvar的URL加载(在iframe中)内容
- Javascript函数根据URL加载不同的config.json文件
- 仅当从另一个 URL 加载数据时,才会触发另一个插件
- 将URL加载到iframe中并查找刚刚加载的HTML的值 - Jquery
- 以编程方式将 URL 加载到 ng 视图中
- 通过 GET URL 加载引导导航导航选项卡
- JavaScript 中的函数在通过单击 href url 加载新页面时不会调用
- 从新的 JSON URL 加载更多数据
- Javascript:从拆分字符串 url 加载多个图像