Javascript显示图像函数：帮助简化函数答案

【问题标题】：Javascript Display Image Function: Help Simplifying FunctionJavascript显示图像函数：帮助简化函数
【发布时间】：2014-06-13 13:11:31
【问题描述】：

我是根据我上学期在学校的一个项目来做这个的。它基本上做了我想要的，但它是为一个数组做的。对于我现在正在做的事情，我只想要一个图像 - 而不是一个数组，这样我就可以摆脱那些 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>

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

【问题讨论】：

myFiles.files[0].src，如果你真的想这样做......
使用数组字面量 [] 而不是 new Array()，它更快更干净。
@Gio 如果我只选择一个文件，第一个块基本上完全符合我的要求。我浏览，选择它，然后浏览器显示它。我正在尝试学习仅加载一个文件的最简单方法。希望没有数组或循环。
@raptus 我不想完全使用数组。你认为有办法修复第二段代码吗？我觉得它非常接近（这来自一个完全的初学者）。
@user3687308 所以本质上你只需要代码加载一张图片，这很简单，但是取出数组会使你的代码不模块化，换句话说，如果其他人想使用你的代码，它不能被使用，因为你的代码只是为你的个人情况而构建的。

标签： javascript html arrays image button

【解决方案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>

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

【讨论】：