图片上传大小，类型，宽高验证

来源：互联网发布：星野娜美知乎编辑：程序博客网时间：2024/06/05 04:08

谷歌浏览器测试通过

form表单

<form id="satmpdefForm" action="http://localhost:8080/mainWeb/system/saveStampdefByForm/" style="padding: 10px 20px 10px 40px;"             enctype="multipart/form-data" method="post">            <table>                <tr>                    <td>标题:</td>                    <td><input type="text" name="sTitle" id="sTitle"                        class="easyui-textbox" style="width: 250px;"></td>                </tr>                <tr>                    <td>使用者:</td>                    <td><input type="text" name="userID" id="userID"                        class="easyui-textbox" style="width: 250px;"></td>                </tr>                <tr>                    <td></td>                    <td><input name="imgFile" id="imgFile" type="file"                        style="width: 100%" accept="image/png,image/jpeg,image/gif" onchange="fileChange(this)"></td>                </tr>            </table>        </form>

javaScript代码，验证图片的大小

function fileChange(target) {           var fileSize = 0;           var isIE = /msie/i.test(navigator.userAgent) && !window.opera;//判断是否为IE浏览器           var Max_Width = 280; //100px           var Max_Height = 280; //200px           if(isIE && !target.files) {             var filePath = target.value;              var fileSystem = new ActiveXObject("Scripting.FileSystemObject");                     var file = fileSystem.GetFile (filePath);                  fileSize = file.size;               }else {                fileSize = target.files[0].size;                 }               var size = fileSize / 1024;                if(size>2000){               showError("附件不能大于2M");             target.value="";             return;            }            checkImgPX(target,Max_Width,Max_Height);          }

checkImgPX是验证图片的宽高

/*      * 判断图片大小      *       * @param ths       *          type="file"的javascript对象      * @param width      *          需要符合的宽       * @param height      *          需要符合的高      * @return true-符合要求,false-不符合      */     function checkImgPX(ths, width, height) {          var img = null;          img = document.createElement("img");          document.body.insertAdjacentElement("beforeEnd", img); // firefox不行          img.style.visibility = "hidden";           img.src = ths.value;          var imgwidth = img.offsetWidth;          var imgheight = img.offsetHeight;          //showError(imgwidth + "," + imgheight);          if(imgwidth > width || imgheight > height) {              showError("图的尺寸应该小于" + width + "x"+ height);              ths.value = "";              return;          }      }

另附验证图片类型的代码

/*  * 判断图片类型  *   * @param ths   *          type="file"的javascript对象  * @return true-符合要求,false-不符合  */ function checkImgType(ths){      if (ths.value == "") {          alert("请上传图片");          return false;      } else {          if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(ths.value)) {              alert("图片类型必须是.gif,jpeg,jpg,png中的一种");              ths.value = "";              return false;          }           else        {             var img=new Image();              img.src=filepath;             while(true){                  if(img.fileSize>0){                  if(img.fileSize>10*1024){                            alert("图片不大于10M。");                       return false;                       }                       break;                      }                   }          }    }      return true;  }

0 0