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

最新推荐文章于 2021-10-20 11:01:05 发布

泡泡菜叶

最新推荐文章于 2021-10-20 11:01:05 发布

阅读量2.3k

点赞数

分类专栏： easyui 文件上传下载文章标签：图片上传验证图片大小验证图片宽高验证

本文链接：https://blog.csdn.net/u014656173/article/details/53750165

版权

easyui 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

文件上传下载

5 篇文章 0 订阅

订阅专栏

谷歌浏览器测试通过

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;  
}