javascript上傳圖片前預(yù)覽圖片兼容大多數(shù)瀏覽器

字號(hào):


    上傳圖片前預(yù)覽圖片這種效果應(yīng)用比較廣泛,實(shí)現(xiàn)的方也大同小異,下面為大家介紹下,在javascript中是如何實(shí)現(xiàn)的,感興趣的朋友可以參考下
    代碼如下:
    <div id="localImag"><img id="preview" width="-1" height="-1" /></div> 
    <asp:FileUpload ID="file_head" runat="server" onchange="javascript:setImagePreview();" /> 
    代碼如下:
    <script type="text/javascript"> 
    function setImagePreview() { 
    var docObj = document.getElementById("ctl00_ContentMain_file_head"); 
    var fileName = docObj.value; 
    if (!fileName.match(/.jpg|.gif|.png|.bmp/i)) { 
    alert('您上傳的圖片格式不正確,請(qǐng)重新選擇!'); 
    return false; 
    } 
    var imgObjPreview = document.getElementById("preview"); 
    if (docObj.files && docObj.files[0]) { 
    //火狐下,直接設(shè)img屬性 
    imgObjPreview.style.display = 'block'; 
    imgObjPreview.style.width = '63px'; 
    imgObjPreview.style.height = '63px'; 
    //imgObjPreview.src = docObj.files[0].getAsDataURL(); 
    if (window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1) { 
    imgObjPreview.src = window.webkitURL.createObjectURL(docObj.files[0]); 
    } 
    else { 
    imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); 
    } 
    } else { 
    //IE下,使用濾鏡 
    docObj.select(); 
    docObj.blur(); 
    var imgSrc = document.selection.createRange().text; 
    var localImagId = document.getElementById("localImag"); 
    //必須設(shè)置初始大小 
    localImagId.style.width = "63px"; 
    localImagId.style.height = "63px"; 
    //圖片異常的捕捉,防止用戶修改后綴來偽造圖片 
    try { 
    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; 
    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; 
    } catch (e) { 
    alert("您上傳的圖片格式不正確,請(qǐng)重新選擇!"); 
    return false; 
    } 
    imgObjPreview.style.display = 'none'; 
    document.selection.empty(); 
    } 
    return true; 
    } 
    </script> 
    此js解決360瀏覽器顯示圖片問題。因?yàn)?60瀏覽器6.2用的是Chrome的內(nèi)核,而 
    代碼如下:
    window.URL.createObjectURL(docObj.files[0]);