图片上传预览

Posted 2020-08-29 iwang5566

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片上传预览相关的知识，希望对你有一定的参考价值。

<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>

摘自：http://blog.csdn.net/goodnew/article/details/17762567

以上是关于图片上传预览的主要内容，如果未能解决你的问题，请参考以下文章

9行代码实现图片上传和预览(自定义按钮上传)