手机端小强原创文章,java小强个人博客站点
当前位置: 首页 >> JS >> JS 图片上传预览

JS 图片上传预览

51400 JS | 2015-1-18

js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>
<body>
<div id="divPreview">
      <img id="imgHeadPhoto" src="C:\Users\Kenny\Desktop\temp\guaguaka.gif"   alt="" />
</div>
<input type="file" onchange="PreviewImage(this,'imgHeadPhoto','divPreview')" size="20"/>

<script type="text/javascript">
//js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
function PreviewImage(fileObj,imgPreviewId,divPreviewId){
    var allowExtention=".jpg,.bmp,.gif,.png";//允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
    var extention=fileObj.value.substring(fileObj.value.lastIndexOf(".")+1).toLowerCase();            
    var browserVersion= window.navigator.userAgent.toUpperCase();
    if(allowExtention.indexOf(extention)>-1){ 
        if(fileObj.files){//HTML5实现预览,兼容chrome、火狐7+等
            if(window.FileReader){
                var reader = new FileReader(); 
                reader.onload = function(e){
                    document.getElementById(imgPreviewId).setAttribute("src",e.target.result);
                }  
                reader.readAsDataURL(fileObj.files[0]);
            }else if(browserVersion.indexOf("SAFARI")>-1){
                alert("不支持Safari6.0以下浏览器的图片预览!");
            }
        }else if (browserVersion.indexOf("MSIE")>-1){
            if(browserVersion.indexOf("MSIE 6")>-1){//ie6
                document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);
            }else{//ie[7-9]
                fileObj.select();
                if(browserVersion.indexOf("MSIE 9")>-1)
                    fileObj.blur();//不加上document.selection.createRange().text在ie9会拒绝访问
                var newPreview =document.getElementById(divPreviewId+"New");
                if(newPreview==null){
                    newPreview =document.createElement("div");
                    newPreview.setAttribute("id",divPreviewId+"New");
                    newPreview.style.width = document.getElementById(imgPreviewId).width+"px";
                    newPreview.style.height = document.getElementById(imgPreviewId).height+"px";
                    newPreview.style.border="solid 1px #d2e2e2";
                }
                newPreview.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";                            
                var tempDivPreview=document.getElementById(divPreviewId);
                tempDivPreview.parentNode.insertBefore(newPreview,tempDivPreview);
                tempDivPreview.style.display="none";                    
            }
        }else if(browserVersion.indexOf("FIREFOX")>-1){//firefox
            var firefoxVersion= parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
            if(firefoxVersion<7){//firefox7以下版本
                document.getElementById(imgPreviewId).setAttribute("src",fileObj.files[0].getAsDataURL());
            }else{//firefox7.0+                    
                document.getElementById(imgPreviewId).setAttribute("src",window.URL.createObjectURL(fileObj.files[0]));
            }
        }else{
            document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);
        }         
    }else{
        alert("仅支持"+allowExtention+"为后缀名的文件!");
        fileObj.value="";//清空选中文件
        if(browserVersion.indexOf("MSIE")>-1){                        
            fileObj.select();
            document.selection.clear();
        }                
        fileObj.outerHTML=fileObj.outerHTML;
    }
}
</script>
</body>
</html>


该方法在实际使用中,在APP上发现存在问题,相关问题请参考:JS图片上传预览 Android上的问题 http://javacui.com/javascript/381.html。 


推荐您阅读更多有关于“ js 上传 图片上传 预览 ”的文章

上一篇:博士中关村买电脑被骗 下一篇:Oracle查看字符集编码修改Oracle编码

猜你喜欢

发表评论:

个人资料
blogger

java小强
没有思考,人生的路会越走越难!

搜索
分类
最新微语
  • 不是本人但真实经历,如果你得了绝症抑或大病,能告诉的人两只手能数过来,而能一直陪床真正帮你的人,一只手就够了。也许你会说我亲戚多哥们多同学多云云,但真遇上的时候,你敢说吗?即使你说了会有人像你想的那样吗?不要尝试考验人性,人走茶凉之类的话都听过,但不遇到事我们未曾理解其中的道理。

    2018-11-07 11:05

  • 每个人的一生都是不同的,我们都需要负重前行。每一种生活都是不同的,我们都需要真实面对。所经历的,让我学会一件事,顺其自然。人,总有很多自己想要的,总有很多困难要面对,总有很多人要去爱,我们不断思考人生,却总是迷失自己。如今,我们最缺的不是金钱和时间,而是忘记了自己的初衷。

    2018-09-28 14:42

  • 车也学了,年也过了,生日也过了,村里的会也赶了,这次,是真的,年过去了。不过我没回京,也没有在家找工作,我在等什么吗?反正现在正合了我这个懒人的要求,不过,我歇不住,思考下人生。

    2018-03-20 00:11

  • 8月1日,我已离开奋斗多年的北京。不知道是暂时的离开,还是永久的离别,反正已经离职在家,告别每日上班,每天苦累的煎熬,过一段属于自己的生活。以前是专职工作,现在专职生活。

    2017-08-18 12:47

  • 又弄完一个项目,累成狗,但是感觉又进步不少,除了很多坑已经踩过,做起来也是轻车熟路。同时也认识到,程序不在于你多牛逼,而是在乎你的细节把控度,而细节的关注,是一个优秀程序员必须要注意的。另外,要相信自己,勇敢向前,没人生下来就是成功的,而且,成功的路,比成功本身更重要。

    2017-06-30 09:46

  • 更多»

最新文章
热门文章
随机文章