2012-12-05 15 views
6

L'anteprima delle immagini nella sezione delle immagini di caricamento nel mio sito non funziona nei browser IE8 +. Ma funziona bene in IE7 e IE6. Sto usando questo sotto il codice per la funzionalità di anteprima dell'immagine. JS:L'anteprima delle immagini del browser incrociato nella sezione di caricamento delle immagini non funziona in 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; 

     } 
    } 
})(); 

di stile 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> 

Questo codice viene eseguito in IE 6 e IE7, ma non viene eseguito in IE8 +. Qualcuno sa qual è il problema nel codice di cui sopra. Esempio di collegamento corrente: https://developer.mozilla.org/files/3699/crossbrowser_image_preview.html

+0

Qual è il punto della funzione anonima se lo si assegna a una variabile? –

+0

possibile duplicato di [IE8 ignora "filtro" stili CSS] (http://stackoverflow.com/questions/6593873/ie8-ignores-filter-css-styles) –

risposta

0

IE8 filtro sostituito con filtro -ms. Se si desidera supportare IE7 e 8 entrambi, è necessario fornire entrambi questi stili. Anche la sintassi per -ms-filter è leggermente diversa da quella del filtro.

Potreste trovare maggiori informazioni qui: IE8 ignores "filter" CSS styles

0

fare come in questo Post

che cosa manca sul vostro codice è l'altezza e la larghezza impostazione

prova con questo

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

se la dimensione dell'immagine è più grande della dimensione mentioend non si espande come si c oding, modificare il sizingMethod=scale-sizingMethod=image

Problemi correlati