<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta charset="utf-8" />
  <meta name="referrer" content="never">

  <title>直接预览本地图片,支持 IE8</title>
</head>

<body>

  <h2>JavaScript 直接预览本地图片,支持 IE8</h2>
  <input type="file" onchange="PreImg(this, 'divPre','imgPre');" />
  <div id="divPre"
    style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width:300px; height:300px;margin-top:10px;">
    <img id="imgPre" src="/favicon.svg" style="width:100%; height:100%;" />
  </div>

</body>

</html>
function PreImg(file, divId, imgId) {
    var exts = ".jpg .jpeg .gif .png .bmp",
        ext = file.value.substring(file.value.lastIndexOf('.'), file.value.length).toLowerCase();
    if (exts.indexOf(ext) == -1) {
        if (file.outerHTML) { file.outerHTML = file.outerHTML; } else { file.value = ""; }
        alert("只能上传 jpg gif png bmp 格式图片");
    }
    else {
        var divs = document.getElementById(divId),
            imgs = document.getElementById(imgId);
        if (divs.filters) {
            imgs.style.display = "none"; file.select();
            divs.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection.createRange().text;
        }
        else { imgs.src = window.URL.createObjectURL(file.files.item(0)); }
    }
}