代码学堂(uxuew.cn)提供付费解决PHP WEB开发等技术服务,如果需要请 点击加我QQ:1662935793.
>web前端 > js教程 > js图片上传预览功能(最低兼容至兼容ie7)

js图片上传预览功能(最低兼容至兼容ie7)

js教程 围观1043次 更新日期:2017-11-27 11:28:42 留下足迹

 js图片上传预览功能(兼容ie7及以上浏览器)
<html>  
<head>  
<title>js图片上传预览功能</title>  
<script>  
function PreviewImage(imgFile)  
{  
    var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);  
    filextension=filextension.toLowerCase();  
    if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))  
    {  
        alert("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");  
        imgFile.focus();  
    }  
    else  
    {  
        var path;  
        if(document.all)//IE  
        {  
            imgFile.select();  
            path = document.selection.createRange().text;  
            document.getElementById("imgPreview").innerHTML="";  
            document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果        
        }  
        else//FF  
        {  
            path=window.URL.createObjectURL(imgFile.files[0]);// FF 7.0以上  
            //path = imgFile.files[0].getAsDataURL();// FF 3.0  
            document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>";  
            //document.getElementById("img1").src = path;  
        }  
    }  
}  
</script>  
</head>  
<body>  
<input type="file" onchange='PreviewImage(this)' />  
<br />  
<div id="imgPreview" style='width:120px; height:100px;'>  
    <img id="img1" src="" width="120" height="100" />  
</div>  
</body>  
</html>  

转载请注明:代码学堂>web前端 > js教程 > js图片上传预览功能(最低兼容至兼容ie7)

喜欢 (591) or 分享 (333)