IE7和IE8中的圖像文件上傳和預覽問題

我正試圖動態上傳和預覽圖像。它適用於Mozilla Firefox，以及IE 9和IE10。IE7和IE8中的圖像文件上傳和預覽問題

但是在IE7和IE8中圖片沒有顯示。請幫我解決這個問題。我的完整代碼如下。

HTML標記：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Files Uploading</title> 
    <script src="js/jquery.min.js"></script> 
</head> 
<body> 
    <form name="upload_images" id="upload_images" enctype="multipart/form-data" method="post"> 
     <table border="0" cellpadding="5" cellspacing="0" id="imageTable"> 
      <tr> 
       <td> 
        <input type="file" value="Browse File" name="photo_0" id="photo_0" onchange="showPreview(this,'0')" /> 
       </td> 
       <td> 
        <img id="img_display_0" width="50" height="50" src="images/default.png" border="0" 
         alt=""></td> 
       <td> 
        <img src="images/delete-icon.png" width="25" height="25" alt="" border="0" onclick="deleteRow(this)" /> 
       </td> 
      </tr> 
     </table> 
     <input type="button" name="submit" value="SAVE" /> 
    </form> 
</body> 
</html>

腳本我現在用的就是：

$(document).ready(function() { 
    $('#photo_0').attr('value', ''); 
}); 

var images_count = 10; 
var thumb_image_width = 50; 
var thumb_image_height = 50; 

count = 1; 

function showPreview(ele, thumbimg_id) { 
    var image_preview = '#img_display_' + thumbimg_id; 
    $(image_preview).attr('src', ele.value); // for IE 

    if (ele.files && ele.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      $(image_preview).attr('src', e.target.result); 
      $(image_preview).attr('width', thumb_image_width); 
      $(image_preview).attr('height', thumb_image_height); 

      $('.displaynone').show(); 
     } 
     reader.readAsDataURL(ele.files[0]); 
    } 
    var table = document.getElementById('imageTable'); 
    var rowCount = table.rows.length; 
    var thumbimg_id = "img_display_" + count; 
    var photo_id = "photo_" + count; 

    var chk_thumbimg_id = "#img_display_" + (count - 1); 

    if ($(chk_thumbimg_id).attr('src') != 'images/default.png') { 
     if (images_count > rowCount) { 
      var row = table.insertRow(rowCount); 
      var cell0 = row.insertCell(0); 
      var functionname = "OnChange='showPreview(this,\"" + count + "\")'"; 
      var inputtype_image = "<input type='file' value='Browse File' name='" + photo_id + "' id='" + photo_id + "' " + functionname + " />"; 
      cell0.innerHTML = inputtype_image; 
      var cell1 = row.insertCell(1); 
      var thumbnail = "<img id='" + thumbimg_id + "' name='" + thumbimg_id + "' width='50' height='50' src='images/default.png' border='0' alt=''>"; 
      cell1.innerHTML = thumbnail; 

      var cell2 = row.insertCell(2); 
      var thumbnail = "<img width='25' height='25' src='images/delete-icon.png' border='0' alt='' onclick='deleteRow(this)'>"; 
      cell2.innerHTML = thumbnail; 
      count = count + 1; 
     } 
    } 

} 
function deleteRow(btndel) { 
    var table = document.getElementById('imageTable'); 
    var rowCount = table.rows.length; 
    if (rowCount > 1) { 
     if (typeof (btndel) == "object") { 
      $(btndel).closest("tr").remove(); 
     } else { 
      return false; 
     } 
    } 
    else { 
     alert(" Cant Delete First Row..."); 
    } 
}

來源

2014-01-16 user3136072