FileUpload 圖片預覽黑科技：純前端實現，零服務器上傳

核心原理：IE 專有濾鏡 + file 控件 value

利用 DXImageTransform.Microsoft.AlphaImageLoader 直接讀取本地文件路徑渲染，無需上傳。

完整頁面代碼

<%@ Page Language="C#" %>
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
  <title>FileUpload 圖片預覽</title>
  <style>
    #preview { 
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
      width: 80px; height: 60px; border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
    <asp:FileUpload ID="FileUpload1" runat="server" onchange="previewImage(this)" />
    <br /><br />
    <div id="preview"></div>
  </form>

  <script>
    function previewImage(input) {
      var preview = document.getElementById('preview');
      // IE: 直接使用文件路徑
      if (window.ActiveXObject || "ActiveXObject" in window) {
        preview.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = input.value;
      } 
      // 現代瀏覽器：FileReader API
      else if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
          preview.style.backgroundImage = 'url(' + e.target.result + ')';
          preview.style.backgroundSize = 'cover';
        };
        reader.readAsDataURL(input.files[0]);
      }
    }
  </script>
</body>
</html>

兼容性說明

安全性與限制

• 僅預覽，不上傳，無服務器資源消耗
• IE 濾鏡僅支持圖片格式（BMP/JPG/PNG/GIF）
• 現代瀏覽器 FileReader 支持任意文件預覽（視頻、音頻、PDF 需對應標籤）
• 無法獲取 EXIF 方向信息，顯示可能旋轉