在javascript中的圖像預覽

以下代碼在Firefox和Chrome中不起作用，但適用於IE。任何人都可以告訴我爲什麼它不能在瀏覽器中工作，除了IE和解決方案。提前致謝。在javascript中的圖像預覽

<html> 
<head> 
<script> 
function hello() 
{ 
    var a=document.getElementById("upload").value; 
    alert(a); 
    document.getElementById("previewIMG").src=a; 
    document.getElementById("previewIMG").style.display="block"; 
} 

</script> 

</head> 
<body> 
<form name="img" enctype="multipart/form-data"> 
<input type="file" name="upload" id="upload" /> 
<input type="button" name="submit" value="Upload Me Now" onClick="javascript:hello();"> 
<img id="previewIMG" src="" style="display:none;" /> 
</form> 
</body> 
</html>

來源

2012-02-28 shahith

不允許加載本地資源 – mgraph 2012-02-28 11:16:35

歡迎來到Stack Overflow！「不起作用」從來不是一個好的錯誤描述。請在將來做一些調試（*什麼*完全不起作用？IE上包含了什麼？它在FF中包含了什麼？）等等）謝謝！ – 2012-02-28 11:16:48

有兩個問題：

現代瀏覽器不公開的完整路徑，在文件選擇上傳任何文件。他們顯示是這樣的：

C：\ Fakepath \則Filename.txt

不幸的是，破壞具有局部圖像預覽的可能性。
由於安全原因，現代瀏覽器不允許嵌入本地圖像資源，所以即使1.）不存在，也不會因此而起作用。

您必須使用其他方法才能獲得該方法一個基於Flash的上傳器，如SWFUpload。這也可以通過HTML 5文件API實現。我想你必須獲取圖像數據，並將其繪製到作爲預覽圖像的畫布中。

編輯：This jQuery library似乎是最好的方式去。它提供了一個API驅動的上傳功能，可以在所有現代瀏覽器（IE除外）中使用圖像預覽功能。謝謝@暗影精靈！

來源

2012-02-28 11:15:59

可能與HTML5。 [看到這一點以及]（http://stackoverflow.com/questions/6750543/show-the-image-preview-before-uploading-it-to-the-server） – 2012-02-28 11:18:13

@Shadow好點，補充說。（這可能不會完全無關緊要，你必須有一個Canvas元素來預覽你的預覽......我想知道現成的上傳部件是否存在，可以做到這一點。） – 2012-02-28 11:20:36

你的意思是[like這個（http://blueimp.github.com/jQuery-File-Upload/）？ :-) – 2012-02-28 11:30:10

在將圖像實際上傳到服務器之前，您無法預覽圖像。

讓用戶選擇圖像要被上傳（.jpg文件，例如）
使用AJAX
顯示使用AJAX

縮略圖文件上傳到服務器

在上面的step 2中，您可能希望將其上載到服務器上的臨時目錄，以便您可以定期將其刪除清理。

來源

2012-10-21 16:38:54 Ram

在javascript中的圖像預覽

回答

相關問題