IE8/9 本地預覽上傳圖檔

本地預覽的意思是，在選擇圖檔之後先不上傳到伺服器，而是由一個

<img>

标簽來預覽本地的圖檔，非 IE8/9 浏覽器可以從

<input type=“file”/>

中擷取到圖檔流，然後設定到

<img src=“”>

進行顯示，但 IE8/9 浏覽器隻能擷取到本地圖檔的絕對路徑，并且設定 src 是無效的。

解決上面問題的方式是采用 css 圖檔濾鏡，示例代碼：

<!-- 要設定圖檔預覽區域的大小 -->
<p class="img-wrap">
    <img name="prevPic" id="prevPic" src="" />
    <input name="uploadImage" id="uploadImage" type="file" />
</p>

<script type="text/javascript">
	$('#uploadImage').change(function (e) {
        if (navigator.userAgent.indexOf('MSIE 8') >= 0 || navigator.userAgent.indexOf('MSIE 9') >= 0) {
            $(this).select();
            window.parent.document.body.focus();
            var realpath = document.selection.createRange().text;
            $(this).parent().css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src=\"" + realpath + "\",sizingMethod=scale)");
        }
        else {
            var file = e.delegateTarget.files[0];
            var reader = new FileReader();
            var targetId = e.target.id;
            reader.readAsDataURL(file);
            reader.onload = function () {
                var picString = reader.result;
                $("#prevPic").attr({ "src": picString }).show();
            };
        }
    });
</script>
           

擷取

realpath

是為了解決釋出 IIS 之後，出現本地圖檔路徑變成

C:\fakepath\xxxx.jpg

的問題。

作者：田園裡的蟋蟀

微信公衆号：你好架構

出處：http://www.cnblogs.com/xishuai/

公衆号會不定時的分享有關架構的方方面面，包含并不局限于：Microservices（微服務）、Service Mesh（服務網格）、DDD/TDD、Spring Cloud、Dubbo、Service Fabric、Linkerd、Envoy、Istio、Conduit、Kubernetes、Docker、MacOS/Linux、Java、.NET Core/ASP.NET Core、Redis、RabbitMQ、MongoDB、GitLab、CI/CD（持續內建/持續部署）、DevOps等等。

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接。

分享到：

QQ空間

新浪微網誌

騰訊微網誌

微信

更多