图片上传回显

<html>
<head>
    <title>
        图片上传预览
    </title>
</head>
<body>
    <div>
        <input type="file" onchange='PreviewImage(this)' />
        <div id="imgPreview" style='width: 500px; height: 400px;'>
            <img src="" />
        </div>
    </div>
</body>
</html>
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 {
                    var fr = new FileReader();
                    path = URL.createObjectURL(imgFile.files[0]);
                    console.log(fr.readAsDataURL(path))
                    document.getElementById("imgPreview").innerHTML = "<img src='" + path + "'/>"
                }
            }
        }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。