首先我們來看效果圖：

點擊上傳之後如下：

在這裏我獲取到文件的大小，並且如果超出我設定的大小，則禁止上傳！

不多說，上代碼：
先看div布局：

　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="imageContainer">
                                                    <input  id="thumbnail" name="thumbnail" required="" type="file" size="100">
                                                    <
 
div class="previewDiv ">
                                                        <div class="upload-icon ">
                                                            <i class="fa fa-arrow-up"></i>
                                                        </div>
                                                        <
 
div class="upload-text">上傳文件</div>
                                                        <image id="showImage"></image>
                                                    </div>
                                                </div>

我們來分析一下該布局

首先，外層DIV有一個imageContainer,表示它是裝載圖片和input：file框容器。

然後，在容器下方，就是我們上傳文件的input框，我將它設為透明，並設置和外層imageContainer一樣大小，這樣，無論點擊外層哪個地方，都能夠點擊到input控件。（註意：在IE8和IE10要點擊兩次才能彈出上傳文件的對話框）。

在控件下方，就是我們要預覽的圖片的容器了。那麽class=“upload-icon”就是一開始加載的那個上傳文件的圖標了。

id="showImage"就是我們預覽的圖片了，它的SRC將會在JS中進行設置。

以下是該布局的CSS樣式：

.fileError{
    color:red;
    font-weight:600;
}
#thumbnail{
    display: inline-block;
}
#showImage{
    display: inline-block;
    width:100%;
    height:100%;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    position: absolute;
}
.imageContainer{
    position: relative;
}
.imageContainer input{
    width:150px;
    height:150px;
    opacity: 0;
    position: absolute;
    z-index: 20;
}
.previewDiv{
    width:150px;
    height:150px;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    position: relative;
    background:#f6f6f6;
    border:1px solid #00a0e9;

}
.upload-icon{
    position: absolute;
    top:30%;
    left:37%;
}
.fa-arrow-up{
    font-size:40px !important;
}
.upload-text{
    position: absolute;
    top:58%;
    left:31%;
}

下面就讓我們一起來看看JS代碼吧：

<script>
    $(function () {
      $("#thumbnail").change(function () {
          var fileSize;
          //兼容舊版IE
          if($.support.msie){
              var fileMgr = new ActiveXObject("Scripting.FileSystemObject");
              var filePath = $(this)[0].value;
              var fileObj = fileMgr.getFile(filePath);
              fileSize= fileObj[0].size/1024;//字節
          }else{
              //獲取到文件大小，除以1024得到文件的字節數-->kb
               fileSize = $(this)[0].files[0].size/1024;
          }
            //如果文件大於100KB
          if(fileSize > 100){
              //錯誤提示，用一個DIV來裝載
              $(".fileError").text("您上傳的文件超出大小，請重新上傳！");
              //讓提交按鈕變得不可選中，避免文件過大之後仍然提交
              $("#submit").attr("disabled",true);
          }else{
              $(".fileError").text("");
              $("#submit").attr("disabled",false);
          }
          console.log($(this))
            //低版本IE不支持FileReader
          //FileReader讀取的是文件的base64編碼，即讀取文件本身的內容
          if (typeof (FileReader) != "undefined") {
              //正則表達式，判斷文件是否是以這些後綴名結尾（都是圖片的後綴名）
              var regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
              //獲取到當前對象下的files屬性，之後會介紹到files屬性裏面的東西
                  var file = $(this)[0].files;
                  //正則表達式匹配
                //file[0].name--->獲取改文件的文件名
                  if (regex.test(file[0].name.toLowerCase())){
                        //實例化對象
                      var reader = new FileReader();
                      //加載該對象
                      reader.onload = function (e) {
                          //e.target.result即為圖片的base64編碼，通過Jquery設置showImage的src
                          $("#showImage").attr("src", e.target.result);
                      };
                      reader.readAsDataURL(file[0]);//為了兼容IE，沒有這句代碼IE實現不了
                  } else {
                      alert(file[0].name + " 不是一個有效的圖片");
                      return false;
                  }

          } else {
              alert("該瀏覽器不支持圖片預覽.");
          }

      })
    })
</script>

對以上的一些數據作詳細的解釋：

console.log($(this)):得到的數據如下圖（註：要在typeof (FileReader) != "undefined")之前打印）：

那麽$(this)[0]就得到了這個input對象，該對象有下面這些屬性和方法，其中一個files屬性是我們需要的。

打印一下files看看裏面有什麽東西：

console.log( $(this)[0].files),如下：

我們發現，它是一個對象數組，第0個元素是名為File的對象，於是我們可以同過 “.”的方式獲取到裏面的屬性，比如說:

name ---> 文件的名字

size ---->文件的大小

type ---->文件的類型和後綴名（jpeg）

lastModified ----》上次修改的時間

那該圖片是怎麽展示在我們面前的呢？

看以下代碼：

                       reader.onload = function (e) {
                          //e.target.result即為圖片的base64編碼，通過Jquery設置showImage        的src
                          $("#showImage").attr("src", e.target.result);
                      };            

那麽e.target.result是什麽東西呢？

就是上面這一串東西了，這是圖片通過base64編碼得到的，將上面這一坨賦值給src之後，圖片就能夠正常顯示了。

JQuery獲取圖片大小並控制圖片文件上傳大小以及上圖片文件時如何預覽圖片