首页 > 编程语言 > 详细

JavaScript实现预览本地上传图片

时间:2019-03-18 17:49:18      阅读:118      评论:0      收藏:0      [点我收藏+]
<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=‘width: 500px; height: 400px;‘>
                <img src="" />
            </div>
        </div>
    </body>

</html>

  

 

JavaScript实现预览本地上传图片

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!