码迷,mamicode.com
首页 > Web开发 > 详细

图片上传预览

时间:2017-01-24 15:47:24      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:预览   bst   style   function   transform   sub   ima   lex   pat   

<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

图片上传预览

标签:预览   bst   style   function   transform   sub   ima   lex   pat   

原文地址:http://www.cnblogs.com/iwang5566/p/6347090.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!