各種瀏覽器通用圖片上傳預(yù)覽



<html>
<head>
<meta charset="utf-8">
<title>Chrome,Safari,Firefox3,IE6,IE7,IE8上傳圖片預(yù)覽</title>
</head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<h2>Chrome,Safari,Firefox3,IE6,IE7,IE8上傳圖片預(yù)覽</h2>
<!--用來(lái)上傳文件,注意，input不能display：none，否則ie因?yàn)榘踩驎?huì)獲取到空路徑-->
<input id="upload_img" type="file">
<br><br>
<!--用來(lái)作為預(yù)覽圖片的載體-->
<div id='preview' style="width:200px;height:200px;border: 1px solid #666;background-size:cover;"></div>
<br><br>
<button type="button" onclick="closePreview()">關(guān)閉預(yù)覽</button>


<script type="text/javascript">
$('#upload_img').on('change',function(){
    //alert(this.value);
    preview(this);
});


function preview(file){

    var preview_image = $("#preview");
    //webkit
    if (file.files && file.files[0]) {

        //chrome,safari
        var reader = new FileReader();
        reader.onload = function (evt) {
            //alert(evt.target.result);
            preview_image.css('background-image', 'url(' + evt.target.result, + ')');
            
        };
        reader.readAsDataURL(file.files[0]);    

        // Firefox 因安全性問(wèn)題已無(wú)法直接通過(guò) input[file].value 獲取完整的文件路徑
        if(!reader)
            preview_image.css('background-image', 'url(' + file.files[0].getAsDataURL(), + ')');
    }
    else//IE6-10
    {
        //input的select()和document.selection.createRange().text非常關(guān)鍵，確保imgSrc獲取到真實(shí)路徑
        file.select();
        var imgSrc = document.selection.createRange().text;
        alert(imgSrc);

        var imgDiv = document.getElementById("preview");
        imgDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
        imgDiv.filters("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

     }
}

//關(guān)閉預(yù)覽
function closePreview(){
    //webkit
    var preview_image = $("#preview");
    preview_image.css("background-image", "none");
    //ie
    var imgDiv = document.getElementById("preview");
    imgDiv.style.filter = "none";
}
</script>

</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容