js实现图片预览

最新推荐文章于 2021-06-23 14:51:32 发布

艳妮子Yeah

最新推荐文章于 2021-06-23 14:51:32 发布

阅读量143

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/wangxiuyan0228/article/details/79893778

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传预览</title>
<script type="text/javascript">
//预览图片 obj：file表单元素 id:预览图id
function previewImg(obj,id) {
    //FileReader
    if(window.FileReader){//验证当前的浏览器是否支持图片预览
        var reader=new FileReader();
        var file=obj.files[0];
        var regexImage=/^image\//;//js正则表达式，匹配是否拥有image
        if(regexImage.test(file.type)){
            reader.οnlοad=function(data){
            var img=document.getElementById(id);
            img.src=data.target.result;

            };
            //开始读取上传的文件内容
            reader.readAsDataURL(file);
        }else{
            return;
        }
    }else{
        alert("您的浏览器不支持图片预览，请升级");
        return;
    }
}

</script>
</head>
<body>
<form>
<input type="file" name="f1" οnchange="previewImg(this,'preview')"/>
<img alt="图片预览" id="preview" width="300px" height="auto"/>
<input type="submit" value="上传图片" accept="image/png,image/gif,image/jpg"/>
</form>
</body>
</html>