瀏覽器圖片上傳部分中的瀏覽器圖像預覽不工作ie8

上傳圖像部分中的圖像預覽在我的網站不能在IE8 +瀏覽器中工作。但在IE7和IE6中工作正常。我正在使用下面的代碼進行圖像預覽功能。 JS：瀏覽器圖片上傳部分中的瀏覽器圖像預覽不工作ie8

var loadImageFile = (function() { 
    if (window.FileReader) { 
     var oPreviewImg = null, oFReader = new window.FileReader(), 
      rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; 

     oFReader.onload = function (oFREvent) { 
      if (!oPreviewImg) { 
       var newPreview = document.getElementById("imagePreview"); 
       oPreviewImg = new Image(); 
       oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px"; 
       oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px"; 
       newPreview.appendChild(oPreviewImg); 
      } 
      oPreviewImg.src = oFREvent.target.result; 
     }; 

     return function() { 
      var aFiles = document.getElementById("imageInput").files; 
      if (aFiles.length === 0) { return; } 
      if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; } 
      oFReader.readAsDataURL(aFiles[0]); 
     } 

    } 
    if (navigator.appName === "Microsoft Internet Explorer") { 
     return function() { 
      document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value; 

     } 
    } 
})();

CSS樣式：

#imagePreview { 
    width: 160px; 
    height: 120px; 
    float: right; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); 
} 
</style>

HTML：

<html> 
    <body> 
     <div id="imagePreview"></div> 

     <form name="uploadForm"> 
      <p><input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();"><br> 
      <input type="submit" value="Send"></p> 
     </form> 

    </body> 
</html>

該代碼在IE 6和IE7運行，但不運行在IE8 +。任何人都知道上面的代碼中有什麼問題。運行示例鏈接： https://developer.mozilla.org/files/3699/crossbrowser_image_preview.html

來源

2012-12-05 sabari

如果您將它分配給一個變量，那麼匿名函數的意義是什麼？ –

[IE8忽略「過濾器」CSS樣式]的可能重複（http://stackoverflow.com/questions/6593873/ie8-ignores-filter-css-styles） –

IE8用-ms-filter替換過濾器。如果你想支持IE7和8，你需要提供這兩種風格。 -ms-filter的語法也與過濾器略有不同。

你可能會在這裏找到更多的信息： IE8 ignores "filter" CSS styles

來源

2012-12-30 23:03:38

請在此Post

什麼缺少你的代碼是在高度和寬度設置

嘗試用這種

imagePreview.style.width = "160px"; 
    imagePreview.style.height = "120px";

如果圖片尺寸大於大小，它不會像您一樣展開oding，改變sizingMethod=scale到sizingMethod=image

來源

2014-05-07 07:15:47

請查看這篇文章： How to upload preview image before upload through JavaScript
我已經測試過，有一點必須做到：

IE8 needs a security settings change: internet settings, security, custom level : 

[] Include local directory path when uploading files to a server 
() Disable 
(o) Enable

啓用該選項後，您的演示在IE8中正常工作！ https://developer.mozilla.org/files/3699/crossbrowser_image_preview.html
謝謝！

來源

2015-11-10 10:07:47 Riley

瀏覽器圖片上傳部分中的瀏覽器圖像預覽不工作ie8

回答

相關問題