如何浏览图像并在浏览器中显示？答案

【问题标题】：How Do I Browse for an Image and Display in Browser?如何浏览图像并在浏览器中显示？
【发布时间】：2014-06-13 04:18:52
【问题描述】：

我觉得我很接近了。

我想要做的是单击一个按钮，浏览一个文件并让它立即显示在浏览器中。到目前为止 - 当我单击按钮时，我可以浏览我的文件，但我在浏览器中得到的只是一个损坏的图像图标。

<!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>

看起来应该很简单，但我似乎无法让它工作。有人可以纠正我吗？提前致谢！

[编辑] 感谢您的快速回复，user3030089！

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

我想做的只是简化它，使它只适用于一张图像。

再次感谢！

【问题讨论】：

标签： javascript html image button load

【解决方案1】：

出于安全原因浏览器不允许这样做，即浏览器中的 JavaScript 无法访问文件系统，但是使用 HTML5 文件 API，只有 Firefox 提供 mozFullPath 属性，但幸运的是，如果您尝试获取该值，它会返回一个空字符串：

$('input[type=file]').change(function () {
    console.log(this.files[0].mozFullPath);
});

http://jsfiddle.net/SCK5A/

所以不要浪费你的时间。

【讨论】：

感谢您的回复。请看一下编辑。