上传图片及时预览

浏览数：28 / 时间：2015年06月09日

最近写了一个上传图片及时预览的功能，也参考了网上一些人代码，可以支持最新的chrome,FF,Ie,以及Ie6

HTML

1     <img id="imgTag" style="height: 100px;" />
2     <input type="file" onchange="DisplayImage(this,‘imgTag‘)"/>

Js

function DisplayImage(fileTag,imgTagId){
    var allowExtention=".jpg.png.gif";
    var extentionArr=fileTag.value.split(‘.‘);
    var extention = extentionArr[extentionArr.length-1];
    if(!(allowExtention.indexOf(extention)>-1)){
        alert("Please upload image!");
    }else{
        //for adveced broswer(the newest ie,chrome,ff)
        if(typeof(FileReader)!=="undefined"){
            var reader = new FileReader();
            reader.readAsDataURL(fileTag.files[0]);
            reader.onload = function(e){
                document.getElementById(imgTagId).setAttribute("src", e.target.result);
            }
        }else{
        //for(ie6)
        document.getElementById(imgTagId).setAttribute("src",fileTag.value);
        }
    }
}

 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　--Ones

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 log src html it la ha class style 代码 log src html it la ha

相关文章

随机文章

您可能还喜欢

您可能还喜欢