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>
  • 相关阅读:
    自定义View的ToolBar布局报错Error:(2) No resource identifier found for attribute 'context' in package 'c
    在学git之主分支 branch
    获取发布版SHA1
    关于开启线程与UI的操作
    播放音频和视频(VideoView控件)
    通知栏Notification的应用
    Android 真机调式 Installation failed with message 远程主机强迫关闭了一个现有的连接。. It is possible that this issue is resolved by uninstalling an existing version of the apk if it is present, and then re-installing. WA
    运行程序申请危险权限
    mysql乐观锁总结和实践
    Nginx配置文件nginx.conf中文详解
  • 原文地址:https://www.cnblogs.com/myssh/p/1493868.html
Copyright © 2011-2022 走看看