JQuery获取图片大小并控制图片文件上传大小以及上图片文件时如何预览图片

　　　　　　　　　　　　　　　　　　　　　　　　　　　　<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>

.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%;
}

<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>

                       reader.onload = function (e) {
                          //e.target.result即为图片的base64编码，通过Jquery设置showImage        的src
                          $("#showImage").attr("src", e.target.result);
                      };