2012-12-05 11 views
6

Podgląd obrazu w sekcji przesyłania zdjęć na mojej stronie nie działa w przeglądarkach IE8 +. Ale działa dobrze w IE7 i IE6. Używam poniższego kodu do funkcji podglądu obrazu. JS:Podgląd podglądu przeglądarki krzyżowej w sekcji Przesyłanie obrazów nie działa w 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 Style:

#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> 

Ten kod działa w IE 6 i IE7, ale nie działa w IE8 +. Każdy wie, jaki jest problem w powyższym kodzie. Przykładowy odnośnik: https://developer.mozilla.org/files/3699/crossbrowser_image_preview.html

+0

Jaki jest punkt anonimowej funkcji, jeśli przypisujesz ją do zmiennej? –

+0

możliwy duplikat [IE8 ignoruje "filtry" style CSS] (http://stackoverflow.com/questions/6593873/ie8-ignores-filter-css-styles) –

Odpowiedz

0

IE8 zastąpił filtr z -ms-filter. Jeśli chcesz obsługiwać IE7 i 8 oba, musisz podać oba te style. Składnia -ms-filter różni się nieznacznie od filtru.

Możesz znaleźć więcej informacji tutaj: IE8 ignores "filter" CSS styles

0

zrobić jak w tym Post

Siema brakuje na kodzie jest wysokość i szerokość ustawienie

spróbować z tym

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

, jeśli rozmiar obrazu jest większy niż rozmiar mentioend, nie będzie on powiększany w miarę oding zmień sizingMethod=scale do sizingMethod=image