jquery实现上传图片及图片大小验证、图片预览效果代码

冷不防 2023-06-12 08:39 18阅读 0赞

[jquery实现上传图片及图片大小验证、图片预览效果代码][jquery]

上传图片验证

\*/  
  
    function submit\_upload\_picture()\{  
     var file = $('file\_c').value;  
     if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file))\{  
            alert("图片类型必须是.gif,jpeg,jpg,png中的一种")  
        \}else\{  
      $('both\_form').action="file!upload.action";  
      $('both\_form').submit();  
      $('insert\_img').sethtml('<img src="http://images.anjiwu.com/images/loading.gif"/>');  
      $('display\_div').setstyle('display', 'block');  
      $('upload\_div').setstyle('display', 'none');  
     \}  
    \}  
  
图片类型与大小的验证

//实例二  
  
    function validate\_edit\_logo(a)\{  
     var file = $('file').value;  
     if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file))\{  
            alert("图片类型必须是.gif,jpeg,jpg,png中的一种")  
            if(a==1)\{  
             return false;  
            \}  
        \}else\{  
         var image = new image();  
         image.src = file;  
         var height = image.height;  
         var width = image.width;  
         var filesize = image.filesize;  
         $('beforeend').src=file;  
         $('div\_regi\_right').setstyle('display', 'block');  
         if(width>80 && height>80 && filesize>102400)\{  
          alert('请上传80\*80像素 或者大小小于100k的图片');  
          if(a==1)\{  
           return false;  
          \}  
         \}  
         if(a==1)\{  
          return true;  
         \}  
     \}  
    \}  
  
图片预览

//实例三  
  
    function viewimg(index) \{  
     var name = 'uploadimg' index;  
     var imgup = $(name);  
     var imgpath = getpath(imgup);  
     var   local   =   imgup.value;  
     var   point   =   local.lastindexof(".");  
     //判断上传文件大小  
     var img   =   document.createelement("img");      
     img.src   =   local;  
     var filesize = img.filesize;  
     img.onload = function()\{filesize=this.filesize;\}  
     if(img.filesize>5242880)\{   
      alert("图片文件过大！");  
      return   false;  
     \}  
       
     //判断是否是图片格式  
     var imgname = imgup.value.substring(imgup.value.lastindexof("."), imgup.value.length);  
     imgname = imgname.tolowercase();  
     if ((imgname != ".jpg") && (imgname != ".gif") &&(imgname != ".jpeg") && (imgname != ".png") && (imgname!= ".bmp")) \{  
      alert("u8bf7u9009u62e9u56feu7247u6587u4ef6uff0cu8c22u8c22!");  
      imgup.focus();  
      //清空file里面的值www.3ppt.com  
      imgup.select();  
      document.selection.clear();  
     \} else \{  
     //显示图片  
      document.getelementbyid("sig\_preview" index).innerhtml = "<imgsrc='" imgpath "' border=0 width=200 height=150><imgsrc='images/u51.png' width='16' height='14' οnclick='delimage(" index ");' />";  
     \}  
     if (index >=3)\{  
      var cnt = index 1;  
      $("img" cnt).style.display = "";  
     \}  
    \}

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[jquery]: http://www.cnblogs.com/huabingchen/archive/2011/04/09/2010350.html