JavaScript实现预览本地上传图片

最新推荐文章于 2024-05-20 17:03:12 发布

arqffsw5938

最新推荐文章于 2024-05-20 17:03:12 发布

阅读量108

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ZhangJiXuan/p/10553569.html

版权

<html>
    
    <head>
        <title>
            www.jb51.net图片上传预览
        </title>
        <script>
            function PreviewImage(imgFile) {
                var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
                if (!pattern.test(imgFile.value)) {
                    alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！");
                    imgFile.focus()
                } else {
                    var path;
                    if (document.all) {
                        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 {
                        path = URL.createObjectURL(imgFile.files[0]);
                        document.getElementById("imgPreview").innerHTML = "<img src='" + path + "'/>"
                    }
                }
            }
        </script>
    </head>
    
    <body>
        <div>
            <input type="file" οnchange='PreviewImage(this)' />
            <div id="imgPreview" style='width: 500px; height: 400px;'>
                <img src="" />
            </div>
        </div>
    </body>

</html>

转载于:https://www.cnblogs.com/ZhangJiXuan/p/10553569.html

arqffsw5938

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现预览本地上传图片

<html> <head> <title> www.jb51.net图片上传预览 </title> <script> function PreviewImage(imgFile) { ...
复制链接

扫一扫