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

原创 2016年12月19日 22:49:34

谷歌浏览器测试通过

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;  
}  
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

上传图片的验证 验证是否为图片 后缀名验证 (总结)

/* * 判断图片类型 * * @param ths * type="file"的javascript对象 * @return true-符合要求,false-不符合 */ function chec...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

图片片上传前的校验处理

    UpFile            http://schemas.microsoft.com/intellisense/ie5">        function CheckRadio(nam...

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

jquery实现上传图片及图片大小验证、图片预览效果代码 jquery实现上传图片及图片大小验证、图片预览效果代码 上传图片验证 */     function submit_uplo...
  • samxx8
  • samxx8
  • 2011年11月29日 11:31
  • 13437

js图片上传验证图片格式和大小尺寸

function getImageSize(obj){ var _file=document.getElementById("file"); var i=_file.value.lastInde...

PHP多图片上传并按照比例修改像素

多文件上传

JS判断上传文件类型

/* * 判断图片类型 */ function checkImgType(ths){ if (ths.value == "") { alert("...
  • mikyz
  • mikyz
  • 2017年04月06日 17:05
  • 656

easyui filebox限制文件上传的类型

类型 accept填写的值 描述 *.3gpp audio/3gpp, video/3gpp 3GPP Audio/Video *.ac3 audio/ac3 AC3 Au...

自定义jQValidate校验规则

自定义jQ Validate校验规则

java、正则表达式、php校验“统一社会信用代码”

正则表达式 方法1.[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10} 方法2.[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片上传大小,类型,宽高验证
举报原因:
原因补充:

(最多只允许输入30个字)