解决IE9及以下浏览器图片上传预览问题

背景介绍：

在当前的项目开发中，尽管大多数现代技术已经不再支持IE浏览器，但由于公司内部系统的需求，许多应用仍然依赖于IE浏览器运行。特别是在处理IE9及以下版本时，开发者面临诸多挑战，尤其是在实现图片上传预览功能上。

HTML结构：

Javascript实现：

function handleFileSelect(event) {
  const file = event.target.files[0];
  if (!file) return;

  const fileType = file.type;
  const validTypes = ['image/jpeg', 'image/png', 'image/jpg'];
  if (!validTypes.includes(fileType)) {
    alert('请选择有效的图片格式（JPEG, PNG, JPG）。');
    return;
  }

  if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
    // IE9及以下版本处理
    handleIEFile(file);
  } else {
    // 现代浏览器处理
    handleModernFile(file);
  }
}

function handleIEFile(file) {
  const img = document.getElementById('previewImage');
  const isIE6 = navigator.userAgent.indexOf('MSIE 6.0') !== -1;
  if (isIE6) {
    // IE6直接设置src
    img.src = file.value;
  } else {
    // 使用滤镜显示图片
    img.style.filter = `progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', src='${file.value}')`;
    img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
  }
}

function handleModernFile(file) {
  const reader = new FileReader();
  reader.Onload= function(e) {
    document.getElementById('previewImage').src = e.target.result;
  };
  reader.readAsDataURL(file);
}