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

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

页面中在上传之前获取上传文件的路径(例子:获取上传图片的路径,获得上传图片的大小:长度和宽度)

body> script type="text/javascript" src="g:\jquery.js">script> input id="upload" type="file"> d...
  • u012307002
  • u012307002
  • 2014年02月16日 16:26
  • 1722

图片片上传前的校验处理

    UpFile            http://schemas.microsoft.com/intellisense/ie5">        function CheckRadio(nam...
  • renyanbinnet
  • renyanbinnet
  • 2007年03月21日 18:10
  • 1182

springmvc处理上传图片代码(校验图片尺寸、图片大小)

package com.maizuo.web.controller; import com.maizuo.domain.Result; import com.maizuo.util.Constant...
  • koushr
  • koushr
  • 2016年04月19日 20:47
  • 4257

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

/* * 判断图片类型 * * @param ths * type="file"的javascript对象 * @return true-符合要求,false-不符合 */ function chec...
  • shaowei213
  • shaowei213
  • 2014年04月11日 00:44
  • 4007

js上传文件(图片)限制格式及大小为3M · 观止

如果你想快速解决这个问题,看本文就够了。查了好多资料,终于解决了,太耗时间了,本文留给给后来者,希望你们工作的更轻松 本文保存为.html文件用浏览器打开即可测试功能       f...
  • superit401
  • superit401
  • 2016年05月30日 10:33
  • 16272

js获取上传图片真实的尺寸大小和存储大小

window.check=function(){ var input = document.getElementById("file"); if(input.files){ ...
  • u014236259
  • u014236259
  • 2016年10月21日 17:32
  • 13840

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

网上看了很多,自己总结写了些,感觉有点罗嗦,不过还可以用;下面不多说,上代码这是我添加的上传文件按钮 这是js代码...
  • qq_33866778
  • qq_33866778
  • 2017年03月08日 15:31
  • 436

js上传图片进行预览、验证格式及尺寸

var flag = 0; /** * 校验表单 */ function checkForm(){ var idcard =document.getElementById("servertype...
  • u014676619
  • u014676619
  • 2016年05月11日 14:03
  • 3605

js 判断上传图片尺寸大小(var img =new Image())

上传时常常会碰到限制图片尺寸的需求,而在后台通过byte判断大小,虽可行,但如果在JS中判断显然是更好的选择,尤其是在不限制文件大小,只限制尺寸时。  通常会使用创建Image对象,或添加一个来获取,...
  • dcb_ripple
  • dcb_ripple
  • 2016年08月11日 12:25
  • 13732

js获取上传图片宽高

直接代码 获取上传图片的宽高
  • fationyyk
  • fationyyk
  • 2017年04月17日 16:46
  • 1785
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片上传大小,类型,宽高验证
举报原因:
原因补充:

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