js上傳圖片預覽，相容IE6以上各大主流瀏覽器

老廖發表於2019-05-11
JS瀏覽器

上傳圖片專案中很常用的功能。最近正好一直在研究，正好在這分享出來！相信很多人在做上傳的時候也會碰到這樣的問題，想通過前端實現圖片的預覽！網上大多數的做法是FLASH，但是呢因為本人不會FLASH 哈哈，所以還是從JS來想辦法了！

1、首先我想到的辦法是在file控制元件的change事件中獲取檔案的路徑來實現預覽，，但是事實告訴我們這樣是不行的。IE6、7、8、9這些瀏覽器中可以獲取完整的路徑，但是Firefox、Chrome下卻獲取不了完整路徑。所以此路不通了！

2、於是忽我就一番百度、谷歌上網找了大量資料，終於讓我在谷歌找到了程式碼。 


function filechange(file) {
        if (file.files && file.files[0]) {
            var reader = new FileReader();
            reader.onload = function (evt) {
                showimg(evt.target.result);
            };
            reader.readAsDataURL(file.files[0]);
        } else {
            file.select();
            var src = document.selection.createRange().text;
            showimg(src);
        }
    }




基實現原理是這樣，如果是支援HTML5的瀏覽器使用FileReader這個物件來讀取圖片的Base64，其他IE系列的瀏覽器則獲取file.value來讀取圖片地址。貌似這樣其他上各種瀏覽器都是可以的，但是經過各種測試發現，還是有問題！IE9、360、QQ等有些瀏覽器下會報JS安全錯誤！

3、於是又谷歌、百度一找，還是找到了解決方案。IE9下直接使用file.select(); document.selection.createRange().text;來獲取地址的時候，瀏覽器預設是拒絕的。網上說到的解決方案是：a、如果巢狀在iframe裡面 file.select()後面加上window.parent.document.body.focus(); b、如果沒有巢狀在iframe裡面 file.select();後面加上 file.blur(); 好了，這樣就在各種瀏覽器下都能取到圖片了，也差不多了！下面貼上程式碼 


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>真正實現相容IE6以上主流瀏覽器-上傳圖片預覽(注意請不用IE Tester測試,IE Tester下input file完全點不了,我是直接用虛擬機器真實IE測試)</title>
    <link href="demo.css" rel="stylesheet" />
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
    <div id="tempbox">
        <img id="imgViewTemp" width="120" height="120" src="none3.gif" alt="" />
    </div>
    <div class="box">
        <input type="file" class="typefile" onchange="filechange(this)" />
        <a href="javascript:;"></a>
        <div></div>
        <img src="none3.gif" alt="" />
    </div>
</body>
</html>
<script type="text/javascript">
    var configs = { width: 120, height: 120 };//縮圖120*120

    function filechange(file) {
        if (file.files && file.files[0]) {
            var reader = new FileReader();
            reader.onload = function (evt) {
                $(file).parent().find('img').attr('src', evt.target.result).show();
                addSel();
            };
            reader.readAsDataURL(file.files[0]);
            
        } else {
            var filterAlpha = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();

            if (navigator.userAgent.indexOf('MSIE 9.0') || navigator.userAgent.indexOf('MSIE 10.0')) {
                if (window.location.href === window.parent.location.href) { //不是巢狀在iframe中直接執行file.blur
                    file.blur();
                } else { //被套在iframe中的時候需要給頁面上其他的DIV或者BUTTON執行focus
                    //$(file).parent().trigger('focus');
                    window.parent.document.body.focus();
                }
            }
            var src = document.selection.createRange().text;
            var tempImage = document.getElementById('imgViewTemp');
            tempImage.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = preViewResize(configs.width, configs.height, tempImage.offsetWidth, tempImage.offsetHeight);
            $(file).parent().find('div').css({ width: rect.width, height: rect.height, 'margin-top': rect.top, 'margin-left': rect.left, filter: filterAlpha + src + '"' }).show();
            addSel();
        }
    }

    function addSel() {
        $('body').append('<div class="box"><input type="file" class="typefile" onchange="filechange(this)" /><a href="javascript:;"></a><div></div><img src="" alt="" /></div>');
    }
</script>



結尾：這裡有幾個需要注意的地方


1、input file 控制元件必須要使用者自己點選觸發（上圖中CSS程式碼用定位實現了使用者點選A標籤觸發file事件，之前我是用JS觸發的有問題），如果是用JS觸發的file事件瀏覽器也拒絕。

2、在IE10以下版本中要使用濾鏡，不然也無法預覽！

3、在此申明，請不要用IETester來測相容性。我發現file控制元件在IETester裡都不能用了。以上程式碼我全是在虛擬機器真實瀏覽器環境中測試的！

好了先就說這些吧！這裡有預覽地址！大家有發現BUG的也可以給我回復，感謝大家來找BUG一起完善程式碼。好東西要大家分享嘛！

第一次發文章，歡迎大家來噴！




由老廖最後編輯於：4年前

內容均為作者獨立觀點，不代表八零IT人立場，如涉及侵權，請及時告知。

相關文章