顯示圖像選擇上傳前上傳不起作用

我試圖顯示一個圖像後，它被髮送到服務器（上傳）從硬盤驅動器中選擇。我在this網站上找到一個小代碼，我複製粘貼它，但它不工作（它在演示頁面上）。我可以選擇一個圖像，它的名稱顯示在選擇文件按鈕的右側，但是圖像和大小都不顯示。我正在拉我的頭髮。顯示圖像選擇上傳前上傳不起作用

所有代碼：

<!DOCTYPE html> <!-- Using margin:auto will not work in IE8, unless a !DOCTYPE is declared. --> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#"> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <link href="design3.css" rel="stylesheet" type="text/css"/> 

    <script src="jquery-1.8.3.min.js"></script> 

<script language="JavaScript"> 

// Handle file while select a new file 
$('#file').change(function() { 
    $('#img_size').val((this.files[0].size)/1000000); 
    handleFiles(this.files); 
}); 


// handle files 
function handleFiles(files) { 
    for (var i = 0; i < files.length; i++) { 
     var file = files[i]; 
     var imageType = /image.*/; 
     if (!file.type.match(imageType)) { 
      continue; 
     } 
     var img = document.getElementById('fake_img'); 
     /* img.src = file; 
     img.onload = function() { 
     }; */ 
     var reader = new FileReader(); 
     reader.onload = (function (aImg) { 
      return function (e) { 
       aImg.src = e.target.result; 
      }; 
     })(img); 
     reader.readAsDataURL(file); 
    } 
} 



function drawAd() 
{ 
    window.open('http://www.google.com'); 
} 

</script> 

</head> 
<body> 

    <input type="file" id="file"/> 
    <input type="text" id="img_size" /> 
    <img src="" id="fake_img" /> 

    <button type="button" onclick="drawAd()">Refresh</button> 


</body> 
</html>

測試在IE和鉻。

來源

2012-12-30 erdomester

您是否檢查過瀏覽器控制檯中的錯誤？ – Pointy

另外，你是否導入jQuery，該代碼依賴？ – Pointy

我是jQuery的新手。我在頭部塊中有：並且這個.js文件與我的網頁位於同一個目錄中。 – erdomester

很難確切地知道沒有看到代碼的其餘部分（表單的HTML），但可能發生的情況是，您的代碼在瀏覽器看到並解析了HTML之前就已經運行了。

包裝你的代碼作爲一個jQuery的「準備」處理程序：

$(function() { 
    // your code here 
});

，看看有沒有什麼幫助。此行：

$('#file').change(function() {

爲文件輸入上的「更改」事件設置事件處理程序。當它運行時，如果瀏覽器沒有將「file」作爲其「id」知道的元素，那麼您將不會發生錯誤，但不會發生任何事情。通過延遲這段代碼直到瀏覽器看到你的整個文檔（這就是jQuery「ready」包裝器所做的事情），你就可以找到「文件」輸入。

來源

2012-12-30 17:45:31 Pointy

看起來，開幕式和閉幕式都是解決方案。非常感謝！順便說一下，我應該在錯誤控制檯中尋找什麼？它應該記錄我任何問題嗎？ – erdomester

顯示圖像選擇上傳前上傳不起作用

回答

相關問題