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

Posted newbest

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面图片上传前，让图片在页面显示相关的知识，希望对你有一定的参考价值。

记录是为了更好的成长！

 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>

 

 

 

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

以上是关于页面图片上传前，让图片在页面显示的主要内容，如果未能解决你的问题，请参考以下文章

55bbs论坛上传图片，显示输入图片链接地址，找不到附件功能。

java实现图片上传至服务器并显示，如何做？希望要具体的代码实现

vue中使用axios post上传头像/图片并实时显示到页面

用php语句在一个页面上传图片到指定文件夹，再在另外一个页面显示文件夹里面的图片。

图片上传 - 在点击提交之前在网页上显示图片

在html页面里面制作一个上传图片的区域，就是点那个区域，就能上传照片，这个html代码应该怎么写？