我有一个包含3个单元格的数组。在第一个单元格中我有一个textarea,您可以在其中插入图像的url。在第二个单元格中,我有一个按钮,当您单击第三个单元格中的图像显示时,我有一个div来显示图像。问题是如何从本地显示来自互联网的图像? 我写的代码是:
function loadImage(){
var mydiv = document.getElementById("idofdivtodisplayimg");
var url = document.getElementById("idoftextareawhereyouputtheurl");
mydiv.innerHTML = url.value;
}
答案 0 :(得分:0)
<html>
<body>
<input type="text" id="imagename" value="" />
<input type="button" id="btn" value="GO" />
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
img = document.createElement('img');
img.src = document.getElementById('imagename').value;
document.body.appendChild(img);
}
</script>
</body>
</html>
答案 1 :(得分:0)
这样做,它允许您上传图像(或至少将其加载到浏览器)或提供图像源的URL。单击按钮,图像被加载并显示!
此代码段使用FileReader API获取上传的图像并将其显示在图像元素
中
function uploadOrNot() {
if (document.querySelector("input[type=file]").files[0]){
let input = document.querySelector("input[type=file]");
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
display(e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
} else if (document.querySelector("input[type=text]").value){
display(document.querySelector("input[type=text]").value);
}
}
function display(res) {
let img = document.createElement("IMG");
img.src=res;
document.querySelector("#result").appendChild(img);
}
<div id="urlOrUpload">
<input type="text"/>
<br>
<input type="file" accetp="image/*"/>
</div>
<div id="buttonHolder">
<button type="button" onclick="uploadOrNot()">Display</button>
</div>
<div id="result"></div>
答案 2 :(得分:0)
为了做到这两点,你需要更改你的HTML和代码。
对于用户有网址的情况,您只需创建一个新图片并将其附加到div,将图片的src
设置为输入中设置的网址:
function loadImage(){
var mydiv = document.getElementById("idofdivtodisplayimg");
var url = document.getElementById("idoftextareawhereyouputtheurl");
var image = new Image;
mydiv.appendChild(image);
image.src = url.value;
}
现在要让它显示本地图像,您需要一个文件输入或拖放方案,因为如果没有某种类型的用户交互,您将无法访问本地文件。
因此,您需要更改html以包含文件输入,并获取用户选择的所选文件的引用。然后使用FileReader读取文件,最后显示
HTML
<input type="file" id="imagefile">
JS
//input reference
var imageinput = document.getElementById("imagefile");
imageinput.addEventListener('change',function (){
var mydiv = document.getElementById("idofdivtodisplayimg");
var image = new Image;
mydiv.appendChild(image);
//FileReader instance
var reader = new FileReader;
reader.addEventListener('load',function(){
//reader.result will contain a dataURL that can be used
//like a regular image url
image.src = reader.result;
});
//read the file as a dataURL
reader.readAsDataURL( imageinput.files[0] );
});
答案 3 :(得分:0)
我通过用img标签替换第三个单元格的div来部分解决它,并且在上面写的函数中,我将其变为:
var image = document.getElementbyId("imageid");
var url = document.getElementbyId("urlid");
image.src = url.value;
但是在我的桌子上,我还有一个按钮,您可以在其中添加与上面相同的行。如何为每个文本框中的每个网址执行此功能?
答案 4 :(得分:-1)
您可以看到示例代码会将数组中的图像添加到文档中。
您还可以使用url.appendChild
var arr = ['http://via.placeholder.com/350x150', 'http://via.placeholder.com/350x250','http://via.placeholder.com/350x350']; // hold image urls in an array.
arr.forEach(function(item){
// loop through array and add images to the document.
var img = new Image();
img.src = item;
document.body.appendChild(img);
});