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

我想要做的就是點擊一個按鈕，瀏覽一個文件並立即顯示在瀏覽器中。到目前爲止 - 當我點擊按鈕時，我可以瀏覽我的文件，但我在瀏覽器中看到的只是一個破碎的圖標圖標。

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

我想要做的就是簡化它，使它只與一個圖像一起工作。

再次感謝！

來源

2014-06-13 user3687308

出於安全原因，瀏覽器不允許這樣做，即瀏覽器中的JavaScript無法訪問文件系統，但使用HTML5 File API，只有Firefox提供了mozFullPath屬性，但幸運的是，如果您嘗試獲取該值，空字符串：

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

http://jsfiddle.net/SCK5A/

所以，不要浪費你的時間。

來源

2014-06-13 04:56:17 user3030089

感謝您的回覆。請看看編輯。 – user3687308

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

回答

相關問題