jquery實現上傳圖片及圖片大小驗證、圖片預覽效果代碼

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