码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-11-28 15:32:59      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:user   ade   turn   fileread   agent   hang   勿喷   reader   name   

记录是为了更好的成长!

 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>

 

 

 

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

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

标签:user   ade   turn   fileread   agent   hang   勿喷   reader   name   

原文地址:https://www.cnblogs.com/newbest/p/10031799.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!