静态页面上传图片预览

//  上传预览图片  start
    $('#photo').on('change',function(){
        var pathurl = '';
        if(this.files && this.files[0]){
            pathurl = window.URL.createObjectURL(this.files[0]);
        }else{      //  IE下
            //IE下，使用滤镜
            this.select();
            pathurl = document.selection.createRange().text;
        }

        //  校验获取的是否为图片文件
        var path=$(this).val();
        var path1 = path.lastIndexOf("\");
        var name = path.substring(path1+1);                 //  获取到的文件名称
        var filepath=name.substring(name.lastIndexOf('.')+1,name.length);

        if(filepath.toLowerCase() != 'jpg' && filepath.toLowerCase() != 'gif' && filepath.toLowerCase() != 'jpeg' && filepath.toLowerCase() != 'png')          //gif,jpg,jpeg,png
        {
            alert("只能上传gif,jpg,jpeg,png格式的图片");
//            var imgurl = $('.headimg-box img').attr('src');
//            console.log(imgurl)
//            console.log($('#photo').val())
        }else{
            $('.headimg-box img').attr({'src':pathurl});
        }
    });

本地图片预览PC


<head>
    <script type="text/javascript">
        function PreviewImage(fileObj,imgPreviewId,divPreviewId){
            var allowExtention=".jpg,.bmp,.gif,.png";//允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
            var extention=fileObj.value.substring(fileObj.value.lastIndexOf(".")+1).toLowerCase();
            var browserVersion= window.navigator.userAgent.toUpperCase();
            if(allowExtention.indexOf(extention)>-1){
                if(fileObj.files){//HTML5实现预览，兼容chrome、火狐7+等
                    if(window.FileReader){
                        var reader = new FileReader();
                        reader.onload = function(e){
                            document.getElementById(imgPreviewId).setAttribute("src",e.target.result);
                        }
                        reader.readAsDataURL(fileObj.files[0]);
                    }else if(browserVersion.indexOf("SAFARI")>-1){
                        alert("不支持Safari6.0以下浏览器的图片预览!");
                    }
                }else if (browserVersion.indexOf("MSIE")>-1){
                    if(browserVersion.indexOf("MSIE 6")>-1){//ie6
                        document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);
                    }else{//ie[7-9]
                        fileObj.select();
                        if(browserVersion.indexOf("MSIE 9")>-1)
                            fileObj.blur();//不加上document.selection.createRange().text在ie9会拒绝访问
                        var newPreview =document.getElementById(divPreviewId+"New");
                        if(newPreview==null){
                            newPreview =document.createElement("div");
                            newPreview.setAttribute("id",divPreviewId+"New");
                            newPreview.style.width = document.getElementById(imgPreviewId).width+"px";
                            newPreview.style.height = document.getElementById(imgPreviewId).height+"px";
                            newPreview.style.border="solid 1px #d2e2e2";
                        }
                        newPreview.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
                        var tempDivPreview=document.getElementById(divPreviewId);
                        tempDivPreview.parentNode.insertBefore(newPreview,tempDivPreview);
                        tempDivPreview.style.display="none";
                    }
                }else if(browserVersion.indexOf("FIREFOX")>-1){//firefox
                    var firefoxVersion= parseFloat(browserVersion.toLowerCase().match(/firefox/([d.]+)/)[1]);
                    if(firefoxVersion<7){//firefox7以下版本
                        document.getElementById(imgPreviewId).setAttribute("src",fileObj.files[0].getAsDataURL());
                    }else{//firefox7.0+
                        document.getElementById(imgPreviewId).setAttribute("src",window.URL.createObjectURL(fileObj.files[0]));
                    }
                }else{
                    document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);
                }
            }else{
                alert("仅支持"+allowExtention+"为后缀名的文件!");
                fileObj.value="";//清空选中文件
                if(browserVersion.indexOf("MSIE")>-1){
                    fileObj.select();
                    document.selection.clear();
                }
                fileObj.outerHTML=fileObj.outerHTML;
            }
        }

    </script>
</head>
<body>
<input type="file" name="file"   onchange="PreviewImage(this,'imgHeadPhoto','divPreview')"  />  <font color="red"> 图片大小为40＊40</font> <br/>
<div id="divPreview">
    <img id="imgHeadPhoto"  width="200"  height="200" src="/admin/upload/">
</body>

相关阅读:
sql对查询为null的值赋默认值
 org.apache.coyote.http11.Http11Processor.service 解析 HTTP 请求 header 错误
 linux使用telnet测试端口
 grep和sed拉取线上日志,nc导入elk
linux命令sed使用
 windows使用nc命令
 离线日志数据导入elk
docker搭建elk日志收集系统
 curl: (60) Peer's Certificate has expired
【Splay】【启发式合并】hdu6133 Army Formations
原文地址：https://www.cnblogs.com/yudishow/p/4326349.html

静态页面 上传图片预览

静态页面上传图片预览