zoukankan      html  css  js  c++  java
  • 上传图片在客户端用Javascript做图片检验,并显示图片缩略图


            
    function PreviewImage(x)
            {
                
                
    //var x = document.getElementById('File1');
                var xid=x.id+"";
                
    var index=xid.substr(xid.length-1,1);
                
                
    if(!|| !x.value) 
                    {                         
                    
    return false;
                    }
                
    var patn = /\.jpg$|\.jpeg$|\.bmp$|\.gif$/i;
                
    try
                {
                    
    var obj = document.getElementById('PhotoPreviewImg'+index);
                    
                    
    var barType=index;
                    
    //默认普通标题图
                    var width=120;
                    
    var height=80;
                    
                    
    if (barType==2//首页标题图
                    {
                        width
    =120;
                        height
    =90;
                    }
                    
    else if (barType==3//焦点图
                    {
                        width
    =320;
                        height
    =240;
                    }
                    
    if(patn.test(x.value))
                        {
                        
    var prvImg = "<img src='file://localhost/" + x.value + "' style=' "+ width +"px; height: "+ height +"px; border: 1;' />";                    
                        
    var prvImgsrc = 'file://localhost/' + x.value;
                        document.getElementById(
    "PhotoPreviewImg"+index).innerHTML=prvImg;
                        
    //setTimeout('CheckImg()',300);
                        //imgwh = new Image();
                        //imgwh.src = "file://localhost/" + x.value;
                        //CheckImg();
                        } 
                    
    else
                        {                    
                        alert(
    "您选择的似乎不是图像文件");
                        
    return false;
                        }
                
                }
                
    catch(e)
                {
                 alert(
    "您选择文件无法预览,或网络故障无法上传,请稍候再试!");
                 
    return false;
                }
            }
            
        
             
     
        
            
    function CheckImg()
            {
                
    if(document.getElementById("PhotoPreviewImg").fileSize==-1||document.getElementById("PhotoPreviewImg").fileSize>5000000)
                            {
                                 document.getElementById(
    "File1").disabled=false;
                                 
    //document.getElementById("PhotoPreviewImg").className='imgPrev0';
                                 document.getElementById("PhotoPreviewImg").src="";
                                 LoadEmptyImage ();
                                 alert(
    "您选择文件超过5M,无法上传!");

                                 
    return false;                                
                            }
                
    else
                {
                    document.getElementById(
    "File1").disabled=false;
                }
                        
                    document.getElementById(
    "PhotoPreviewImg").className='';
                    
    var originwidth=document.getElementById("PhotoPreviewImg").width*10;
                    
    var originheight=document.getElementById("PhotoPreviewImg").height*10;
                    
    var scale=originwidth/originheight;                        
                    document.getElementById("PhotoPreviewImg").style.top=20;
                    document.getElementById(
    "PhotoPreviewImg").style.left=20;
                    
                    
    if(scale>0.8)
                        {
                        document.getElementById(
    "PhotoPreviewImg").className='imgPrev2';
                        
    var largerheight=document.getElementById("PhotoPreviewImg").height;
                        
    var leftover=(150-largerheight)/2;
                        document.getElementById("PhotoPreviewImg").style.marginLeft=2;                
                        document.getElementById(
    "PhotoPreviewImg").style.marginTop=leftover;
                        }
                    
    else
                        {                                                            
                        document.getElementById(
    "PhotoPreviewImg").style.marginTop=2;
                        document.getElementById(
    "PhotoPreviewImg").className='imgPrev1';
                        
    var largerwidth=document.getElementById("PhotoPreviewImg").width;
                        
    var leftover=(120-largerwidth)/2;                        
                        document.getElementById("PhotoPreviewImg").style.marginLeft=leftover;
                        }                                                

                        
    return true;
        
            }
        <script type="text/javascript" defer>
                
    function checkit(obj)
                {
                    
    if (obj.value.length >= 16)
                    {
                        alert(
    "在这里输入照片标题,不超过16个字!");
                        
    var str = obj.value;
                        obj.value 
    = str.substring(0,16);
                        
    return false;
                    }
                    
    return true;
                }
                
    function empty()
                {
                    
    if(document.getElementById("<%= phDescription1.ClientID%>").value == "" || document.getElementById("<%= phDescription1.ClientID%>").value == "在这里输入照片标题,不超过16个字")
                    {
                        document.getElementById(
    "<%= phDescription1.ClientID%>").value = "";
                    }
                }
                
    function noempty()
                {
                    
    if(document.getElementById("<%= phDescription1.ClientID%>").value == "")
                    {
                        document.getElementById(
    "<%= phDescription1.ClientID%>").value = "在这里输入照片标题,不超过16个字";
                    }
                }
                
                
    var imgwh;

                
    function PreviewImage1()
                {
                    
    var x = document.getElementById('<% = UpImg1.ClientID %>');
                    
    if(x != null)
                    {
                        checkupfile(x);
                    }
                }
                
                
    function checkupfile(x)
                {
                    
    if(!|| !x.value) 
                    {                         
                        
    return false;
                    }
                    
    var patn = /\.jpg$|\.jpeg$|\.bmp$|\.gif$/i;
                    
    try
                    {
                        
    if(!patn.test(x.value))
                        {            
                            alert(
    "您选择的图片格式不正确,请选择jpg,jepg,gif,bmp格式的图片!");
                            
    return false;
                        }
                        
    else
                        {
                            imgwh 
    = new Image();
                            imgwh.src 
    = x.value;
                        }
                    }
                    
    catch(e)
                    {
                        
    //alert("您选择文件无法预览,或网络故障无法上传,请稍候再试!");
                        return false;
                    }
                }

                
    function BeforeSaveClick()
                {
                    
    var x = document.getElementById("<% = UpImg1.ClientID %>");

                    
    if(!|| !x.value) 
                    { 
                        document.getElementById(
    '<%= Span1.ClientID%>').innerHTML = "请选择要上传的照片。";
                        
    return false;
                    }
                    
    var patn = /\.jpg$|\.jpeg$|\.bmp$|\.gif$/i;
                    
    try
                    {
                        
    if(!patn.test(x.value))
                        {            
                            alert(
    "您选择的图片格式不正确,请选择jpg,jepg,gif,bmp格式的图片!");
                            
    return false;
                        }
                        
    else
                        {
                                                    
                            
    var sz = imgwh.width + "x" + imgwh.height;
                            document.getElementById(
    "hidImageWH").value = sz;
                            
                            document.getElementById(
    "hidImageWH_url").value = x.value;
                            
    return true;
                        }
                    }
                    
    catch(e)
                    {
                        alert(
    "网络故障无法上传,请稍候再试!");
                        
    return false;
                    }
                }

                
    </script>
  • 相关阅读:
    高德地图周边搜索与搜索提示(三)
    jupyter notebook 添加目录
    Ubuntu 下简单完全卸载MySQL 以及便捷安装
    Ubuntu中安装MySQL,更改默认用户密码
    python-pip版本更新
    概率论与数理统计--->陈希孺---书籍链接下载
    机器学习实战-书籍链接下载
    Markdown安装/破解/下载
    Kaggle比赛入门比赛--Titanic-测试玩--
    python机器学习算法简介
  • 原文地址:https://www.cnblogs.com/myssh/p/1493868.html
Copyright © 2011-2022 走看看