JQuery Image Preview不起作用

我見過幾種顯示圖像預覽的方式，但它們都不起作用，或者它們只在FF/Chrome中工作。JQuery Image Preview不起作用

試圖保持它的簡單：

標記：

<input type="file" id="logo-upload" onchange="changePreview();"/> 
<br/>   
<img src='@Url.Image("logo.png")' alt="Preview" id="logo-preview"/>

的Javascript：

<script type="text/javascript"> 

    function changePreview() { 

     var input = $('#logo-upload').val(); 

     $('#logo-preview').attr('src', input) 
        .width(150) 
        .height(50); 
     } 

</script>

在調試input顯示正確的本地圖片的路徑，但預覽一直沒有出現。爲什麼以及如何讓這個工作（在所有瀏覽器中）？

謝謝。

來源

2012-08-03 Shenaniganz

你有一個'

我不知道這是一個複製粘貼問題，但你的報價需要修復'' – 2012-08-03 20:36:04

有問題的複製/粘貼東西 @Rodolfo是的，但只有在「預覽」對用戶看起來很好後纔會提交表單 – Shenaniganz 2012-08-03 20:43:34

嘗試設置$('#logo-upload').change(function(){})而不是使用onChange。我認爲這是一個好的開始。然後把這個jQuery放在$(document).ready(function(){})裏面。這可能是另一個問題，如果您在頁面上存在元素之前設置腳本。

如果你可以發佈更多的代碼，這將是有益的。

另外，對於IE，您將遇到用戶無法控制的權限問題（至少在這種情況下）。因此，在這些情況下，您必須首先上傳圖像，才能從服務器獲取圖像，或者必須更改其安全設置以允許訪問此類內容。

<input type="file" id="logo-upload" /> 
<br/>   
<img src="@Url.Image('logo.png')" alt="Preview" id="logo-preview"/> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#logo-upload').change(function() { 
      var input = $(this).val(); 
      $('#logo-preview').attr('src', input).width(150).height(50); 
     }) 
    }); 
</script>

來源

2012-08-03 20:26:22 Tim

謝謝，但這與我在OP中所做的並沒有什麼不同，而且很不幸也不能工作。試過IE和Chrome – Shenaniganz 2012-08-03 21:28:20

這與你在OP中做的不同。這樣，事情就被正確地封裝了，所以確保它們能夠工作，並且不會將舊的DHTML方法與DOM事件混合在一起。此外，我在IE中解決了一個問題，它妨礙了這種預覽圖像的特殊方式。如果你想在客戶端獲得更多的可訪問性，你將不得不進入HTML5中的FileAPI。 – Tim 2012-08-03 22:18:55

此外，在瀏覽器的當前狀態下，我敢肯定，如果沒有首先將文件上傳到服務器（這可能會破壞預覽點），您將無法在ALL中執行文件預覽。 http://caniuse.com/filereader – Tim 2012-08-03 22:20:48

JQuery Image Preview不起作用

回答

相關問題