如何瀏覽圖像並在瀏覽器中顯示？

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>

似乎它應該很簡單，但是我似乎無法使其工作。 有人可以理順我嗎？ 提前致謝！

[edit]感謝您的快速回復，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 File API，僅Firefox提供了mozFullPath屬性，但是幸運的是，如果您嘗試獲取該值，它將返回一個空字符串：

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

http://jsfiddle.net/SCK5A/

因此，不要浪費您的時間。

如何瀏覽圖像並在瀏覽器中顯示？

問題描述

1 個解決方案

解決方案1
1 已采納 2014-06-13 04:56:17

如何瀏覽圖像並在瀏覽器中顯示？

問題描述

1 個解決方案

解決方案1 1 已采納 2014-06-13 04:56:17

解決方案1
1 已采納 2014-06-13 04:56:17