首先我们来看效果图：
点击上传之后如下：
在这里我获取到文件的大小，并且如果超出我设定的大小，则禁止上传！
不多说，上代码：
先看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之后，图片就能够正常显示了。