圖片上傳在IE

Question

我在圖片上傳的工作，我上傳（比如在twitter.com上實現了顯示圖片）

我寫這是對工作的精細一些JS代碼之前已經對預覽圖像鉻和火狐瀏覽器，但不能在IE瀏覽器上工作（8或9）

function PreviewImg(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#previmg').attr('src', e.target.result); 
      } 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 


<input type="file" name="logofile" class="txtbox" onchange="PreviewImg(this);" /> 
    <img id="previmg" src="#" /> 

我已經調試了IE中的代碼。 input.files在IE中顯示爲空，任何人都可以告訴解決方案或任何其他解決方案來實現功能 關注

Answer 1

這對IE不起作用，因爲代碼依賴於IE不支持的HTML5文件API 。它將從IE10開始支持它。因此，如果您需要支持低於10的IE，您可以使用一些現有的AJAX上傳組件（Uploadify，Plupload，Valums AJAX Upload，Bleuimp等）將文件上傳到服務器，在服務器上生成並存儲縮略圖並使用JSON將該URL發送到保存的圖像到客戶端，以便它可以使用<img>標籤顯示它。實際上，由於IE支持Data URI Scheme，您不需要將上傳的文件存儲到服務器以生成預覽。您可以直接從預覽控制器操作中返回縮略圖圖像，格式爲Data URI Scheme，以便您可以在客戶端上顯示它。

如果您沒有時間和資源來實現此功能，另一個解決方案是簡單地告訴用戶，如果他們想要實時預覽圖像，那麼他們應該考慮使用不同的網絡瀏覽器，因爲您的網站不支持IE瀏覽器。

Answer 2

您可以嘗試Fancy ASP.NET MVC Image Uploader

Answer 3

但IE瀏覽器

的document.getElementById（ 'previmg'）SRC = 「文件：///」 + input.value。

espero te sirva。

Answer 4

<script type="text/javascript"> 
 
      function loadname(img, previewName) { 
 
       var isIE = false; 
 
       if (jQuery.browser.msie) { 
 
        isIE = true; 
 
       } 
 
       var path = img.value; 
 
       var ext = path.substring(path.lastIndexOf('.') + 1).toLowerCase(); 
 
       if (ext = "gif" || "jpeg" || "jpg" || "png") { 
 
        if (isIE) { 
 
         document.getElementById(previewName.id.toString()).src = path; 
 
         return; 
 
        } else { 
 
         if (img.files[0]) { 
 
          var reader = new FileReader(); 
 
          reader.onload = function (e) { 
 
           $('#' + previewName).attr('src', e.target.result); 
 
          } 
 
          reader.readAsDataURL(img.files[0]); 
 
         } 
 
        } 
 
       } else { 
 
        alert("You must select a valid image file!"); 
 
       } 
 
      } 
 

 

 

 
      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; 
 

 
        } 
 
       } 
 
      })(); 
 

 
    </script>

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

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