检查上传图片的大小和格式

  99cj_org-->WebRoot-->cdn-->static-->js-->org-->base-->base_info-->show.js

   首先是jsp中的<div>

<div class="form-group">
            <label class="form-label">机构logo：</label>
            <div class="form-input">
              <div class="input-img-upload img-company-logo"><span>机构 LOGO</span>
                <div class="inner"><img id ="org_logo_img" src="" onerror="javascript:this.src='<%=R.getStaticPath("images/user-header.png")%>';"  alt=""></div>
                <div class="btn-uploadfile" id="logo_img_div"><span>
                     
                    上传图片</span>
                  <input name="u_head_url" ref="head_url" id="logo_img_upload" type="file" accept="image/*"/>
                  <input name="u_head_url_img" id="u_head_url_img" type="hidden">
                </div>
              </div>
              <div class="help-tip">
                <div class="tip">
                  封面要求：<br/>
                  1. 建议最佳尺寸：200 x 80 px <br/>
                  2. 上传文件大小不能超过 1 MB <br/>
                  3. 支持 jpg、png、gif 格式<br/><span>推荐使用透明背景的png格式</span>
                </div>
              </div>
            </div>
          </div>

   <input>的type="file"可以直接选取文件，accept属性是限制文件的格式

   

function checkImg(this_){
		var filepath = this_.val();
        var extStart = filepath.lastIndexOf(".");
        var ext = filepath.substring(extStart, filepath.length).toUpperCase();
        if ( ext != ".PNG" && ext != ".GIF" && ext != ".JPG") {
        	YY.ui.alert("图片限于png,gif,jpeg格式");
            return false;
        }
        var file_size = 0;
        if (/msie/.test(navigator.userAgent.toLowerCase())) {
            var img = new Image();
            img.src = filepath;
            while (true) {
                if (img.fileSize > 0) {
                    if (img.fileSize > 1 * 1024) {
                    	YY.ui.alert("上传的图片大小不能超过1M！");
                    	return false;
                    } 
                    break;
                }
            }
        } else {
            file_size = this_[0].files[0].size;
            var size = file_size / 1024;
            if (size > 1024) {
            	YY.ui.alert("上传的图片大小不能超过1M！");
            	return false;
            } 
        }
        return true;
	}

   参数“this_”是jsp内的节点 var tip = $("#logo_img_upload");

   判断格式：

   获取的this_.val()为选择的文件的路径，用string处理后通过其拓展名就可以判断出此文件属于什么类型的文件。

   判断文件大小：

/msie/.test(navigator.userAgent.toLowerCase())

   以上代码为jquery1.9后更新的内容，用来判断浏览器类型，具体判断方式问百度；以上的判断是用来判断是否为IE浏览器，具体是否生效没有用IE测（微软自己都放弃IE了），这里主要分解非IE浏览器的处理方式：

 file_size = this_[0].files[0].size;
            var size = file_size / 1024;
            if (size > 1024) {
            	YY.ui.alert("上传的图片大小不能超过1M！");
            	return false;
            }

   file_size获取的值便是当前文件的大小，单位是KB，所以后面要/1024，将单位转化为M后进行比较。

   主要需要注意的是this_[0].files[0].size的写法，jquery获取的节点对象其实是将getElementById()获取的节点对象进行封装后的结果，而jquery对象默认是一个数组，所以定位后需要加索引号。具体内容请参照以下博客：

http://blog.sina.com.cn/s/blog_6edf16820102vhox.html

按照this_[0].files[0].size的写法，当type="file"的时候，获取的files默认也被封装成为了数组，所以也需要加入索引号。

同时，this_[0]为原生对象，也就是说，files[0].size这个属性是javascript原生对象的属性，并不属于jquery的方法。

转载于:https://my.oschina.net/u/2357858/blog/499481