回到頂部

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

時間:5年前   作者:老廖   瀏覽:1072   [站內原創,轉載請注明出處]

標簽: JavaScript   css  

上傳圖片項目中很常用的功能。最近正好一直在研究,正好在這分享出來!相信很多人在做上傳的時候也會碰到這樣的問題,想通過前端實現圖片的預覽!網上大多數的做法是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一起完善代碼。好東西要大家分享嘛!

第一次發文章,歡迎大家來噴!




老廖最后編輯于:5年前

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

評論努力加載中...
暫無評論
暫無評論

手機掃碼閱讀

熱門相關

加載中...
關于我們   聯系我們   申請友鏈   贊助記錄   站點地圖
? 2014 - 2017 www.1255315.live All Rights Reserved. 京ICP備14042174號-1
本站遵循 CC BY 4.0 協議,轉載請注明出處 。
辽宁十一选五走实图 配资平台咨询尚牛在线 内蒙古快3和值 黑龙江福彩网p62开奖 股票推荐新浪博客 平特一肖是什么玩法 股票今日大盘 甘肃十一选五推荐预测 体育彩票大乐透玩法 私募基金配资利率 安徽快三规律破解