上传图片在客户端用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>
原文地址:https://www.cnblogs.com/goody9807/p/1098992.html