首页 > 网站 > WEB开发 > 正文

上传图片及时预览

2024-04-27 14:11:45
字体:
来源:转载
供稿:网友

上传图片及时预览

最近写了一个上传图片及时预览的功能,也参考了网上一些人代码,可以支持最新的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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表