上传图片在客户端用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:  " +  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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值