需求分析：

在做上传图片的时候，如果不限制上传图片大小，后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢？有两种方式：

1)后台处理： 也就是AJAX POST提交到后台，把图片上传到服务器上，然后获得该图片大小做处理。 2)前台处理： 也就是利用Javascript获取该图片大小。 显然第一种方式，很不好。因为需要把文件先上传到服务器上，如果文件很大的话，在加上网不是很快，需要等待好长时间，治标不治本。

功能解析：

在这里我只介绍IE与FireFox两个浏览器的不同做法。

IE6： 关键字： fileSize onreadystatechange complete 在IE6中可以通过Img对象的fileSize 属性获得文件大小，但这个fileSize属性的正确值是建立在onreadystatechange 事件的complete 中，也就是

    
      function sizeCheck(img) {     if(img.readyState == "complete") {     alert(img.fileSize);     } }
    

FireFox3.0：

关键字： getAsDataURL() fileSize 在FireFox中处于安全的考虑，无法获得上传图片的完整路径，只能获得图片名称。但浏览器提供nsIDOMFile這樣一個接口，所以需要通过getAsDataURL()获得处理过后的路径，但该路径不影响图片src显示。 nsIDOMFile接口：

DOMString getAsBinary(); DOMString getAsDataURL(); DOMString getAsText(in DOMString encoding); 
     function checkFileChange(obj) {     var img = document.getElementById("img");     img.src = obj.files[0].getAsDataUrl();     alert(obj.files[0].fileSize); }

以上是两个不同浏览器的处理方式,那么怎么把他们融和到一起呢？我在下面会将我做的小例子贴出来，其中里面我使用JQuery，方便与获取对象

 
    
           
     
           
      
           
            
       
                 .img {width:136px;height:102px;}        .imgError{border:3px solid red;}          
        
              //限制上传图片大小100K         var MAXSIZE = 100 * 1024;      //图片大小限制信息         var ERROR_IMGSIZE = "图片大小不能超过100K";     //默认图片         var NOPHOTO = "imgs/nophoto.gif";      //图片是否合格          var isImg = true;      /** * Input file onchange事件 * @params obj file对象 * @return void **/         function checkFileChange(obj) {       //初始化设置             $(".imgTable").removeClass("imgError");             updateTips("");            var img = $(".img").get(0);             var file = obj.value;            var exp = /.\.jpg|.\.gif|.\.png|.\.bmp/i;             if (exp.test(file)) {            //验证格式                 if($.browser.msie) {            //判断是否是IE                     img.src = file;                 } else {                     img.src = obj.files[0].getAsDataURL();                     sizeCheck(img);                 }              } else {                 img.src = NOPHOTO;                 $(".imgTable").addClass("imgError");                 updateTips("图片格式不正确");                 isImg = false;                 }            }         /** * sizeCheck 检查图片大小 * @params img 图片对象 * @return void **/        function sizeCheck(img) {         //初始化设置             $(".imgTable").removeClass("imgError");                  updateTips("");                 if ($.browser.msie) {                    //查看是否是IE                     if(img.readyState == "complete") {                         if (img.fileSize > MAXSIZE) {                             $(".imgTable").addClass("imgError");                              updateTips(ERROR_IMGSIZE);                              isImg = false;                          }else {                             isImg = true;                         }                     }else {                         $(".imgTable").addClass("imgError");                        updateTips(ERROR_IMGSIZE);                         isImg = false;                    }                } else {                     var file = $("input:file[name='uploadImg']")[0];                     if (file.files[0].size > MAXSIZE) {                         $(".imgTable").addClass("imgError");                          updateTips(ERROR_IMGSIZE);                         isImg = false;                       }else {                         isImg = true;                      }                  }             }              /** * updateTips 注册错误信息显示 * @params str 显示内容 * @return void **/            function updateTips(str) {                 $("p#errorTips").text(str);             }             /** * commit 注册提交 * @return void **/            function commit() {                  var isCommit = true;                  var usrname = $("input:text[name='usrname']"),                       email = $("input:text[name='email']"),                       img = $(".img"),                      file = $("input:file[name='uploadImg']"),                      frm = document.frm;                       isCommit = isCommit && isImg;                    if(isCommit) {                         frm.action = "about:blank"; frm.submit();                    }             }             /** * errorImg 图片错误显示 * @params img 图片对象 * @return void **/            function errorImg(img) {                   img.src = NOPHOTO;             }              
         
                   
          
            
           
          
           
                                                  
            姓名：                           
                                            
            性别：                            
            男                
            女                                             
            邮件：             
                                                
            
             图像                
             
                                                    
                                                               
                                                        
              
                               
               
                注册