页面图片上传前，让图片在页面显示

时间：2022-04-11 01:40

记录是为了更好的成长！

1、代码示例（显示并判断图片大小和格式）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
        <img id="imghead"  width="260" height="180" /> <!--图片显示位置-->
        <input type="file" name="file" id="file" onchange="getPhotoSize(this)" />
        
        <script>
            // 选择图片显示
            function imgChange() {
                //获取点击的文本框
                var file =document.getElementById("file");
                var imgUrl =window.URL.createObjectURL(file.files[0]);
                var img =document.getElementById(‘imghead‘);
                img.setAttribute(‘src‘,imgUrl); // 修改img标签src属性值
            };
            
            function lookImg() {
                $("#img_a").remove();
                $("#show").show();
                var r= new FileReader();
                f=document.getElementById(‘file‘).files[0];
                r.readAsDataURL(f);
                r.onload=function (e) {
                    document.getElementById(‘show‘).src=this.result;
                };
            }
            
            //判断照片大小
            function getPhotoSize(obj){
                //文件type
                var photoExt = obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
                if(!(photoExt==‘.jpg‘||photoExt==‘.png‘||photoExt==‘.jpeg‘||photoExt==‘.gif‘)){
                    alert("文件格式不符合要求！");
                    document.getElementById(‘file‘).value=‘‘;
                    return false;
                }
                var fileSize = 0;
                var isIE = /msie/i.test(navigator.userAgent) && !window.opera;      
                if (isIE && !obj.files) {     
                    var filePath = obj.value;      
                    var fileSystem = new ActiveXObject("Scripting.FileSystemObject");  
                    var file = fileSystem.GetFile (filePath);        
                    fileSize = file.Size;     
                }
                else{
                    fileSize = obj.files[0].size;   
                } 
                //文件大小
                fileSize=Math.round(fileSize/1024*100)/100; 
                if(fileSize>=200){
                    alert("图片过大，超过200k,请选择较小的图片");
                    document.getElementById(‘file‘).value=‘‘;
                    return false;
                }
                imgChange();
            }
        </script>
    </body>
</html>

以上内容代表个人观点，仅供参考，不喜勿喷。。。