Question

我的基础是我上学期在学校的一个项目。它基本上完成了我想要它，但它为数组做了它。对于我现在正在做的事情，我只想要一个图像 - 而不是一个数组，以便我可以摆脱那些for循环等。

<!DOCTYPE html>
<html>
<head>
<script>
function loadImage()
{
    myImages = new Array();
    var myFiles = document.getElementById("files");

    for (var i=0; i < myFiles.files.length; i++)
    {
        myImages[i] = myFiles.files[i].name;
    }

    var theImages = document.getElementById("images");
    theImages.innerHTML = ""; // Clearout the image area.

    for (var i=0; i < myFiles.files.length; i++)
    {
    "<img id='pic" + i + i + ";'" + " src='" + myImages[i] +
    "'" + " width = '400' " + " /> ";
}
}
</script>
</head>
<body>
<div>
<input id="files" type="file" name="files[]" accept="image/*" onchange="loadImage();" multiple />
</div>
<div id="images" style="position:relative; ">
Images will go here...
</div>
</body>
</html>

这是我到目前为止所处的位置：

<!DOCTYPE html>
<html>
<head>
<script>
function loadImage()
{
        var myFiles = document.getElementById("files");

        document.getElementById("images").innerHTML = "<img src='" + myFiles.files.src +"'>";
}
</script>
</head>
<body>
<div>
<input id="files" type="file" name="files" accept="image/*" onchange="loadImage();">
</div>
<div id="images">
Images will go here...
</div>
</body>
</html>

到目前为止 - 当我点击按钮时，我可以浏览我的文件，但我在浏览器中看到的只是一个损坏的图像图标。

Answer 1

<html>
<head>
<script>
function loadImage()
{
    var myFiles = document.getElementById("files");

    document.getElementById("images").innerHTML = "<img src='" + myFiles.files[0].name +"'>";
}
</script>
</head>
<body>
<div>
<input id="files" type="file" name="files" accept="image/*" onchange="loadImage();">
</div>
<div id="images">
Images will go here...
</div>
</body>
</html>

我正在回答我自己的问题，因为它只是通过评论回答，我无法选择它们作为答案。感谢Raptus和Gio帮助我到达那里。

Javascript显示图像功能：帮助简化功能

1 个答案: