檢查上傳圖片的大小和格式

  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的方法。