JavaScript实现预览本地上传图片

<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" onchange='PreviewImage(this)' />
            <div id="imgPreview" style=' 500px; height: 400px;'>
                <img src="" />
            </div>
        </div>
    </body>

</html>

  

原文地址:https://www.cnblogs.com/ZhangJiXuan/p/10553569.html