Question

我觉得我非常接近。

我希望能够做的是单击按钮，浏览文件并立即显示在浏览器中。到目前为止 - 当我点击按钮时，我可以浏览我的文件，但我在浏览器中看到的只是一个损坏的图像图标。

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

我想要做的只是简化它，以便它只适用于一个图像。

再次感谢！

Answer 1

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

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

http://jsfiddle.net/SCK5A/

所以不要浪费你的时间。

如何在浏览器中浏览图像和显示？

1 个答案: