前端功能实现：预览要上传的图片，并限制图片的上传大小

前端功能实现：预览要上传的图片，并限制图片的上传大小

HTML部分：

现在有一个表格，表格的第一个td中是一个图片上传的input框

<td id="iconTd" rowspan="4" style="background-image: url('<%=basePath%>/static/images/niu.jpg');
        background-size: 100% 100%">
    <input type="file" id="file" accept="image/jpeg,image/jpg,image/png" onchange="showIncon(this)">
td>

td的背景图片放置一张默认图片，这里我放了一张牛的图片

input框中添加属性accept="image/jpeg,image/jpg,image/png"来限制只能上传这三种格式的图片文件，想要添加更多类型可以自行百度相关的MIME格式添加进去

input框添加了onchange方法，图片更换时被调用

CSS部分：

这里我为input框添加了样式{opacity:0;width:100%;height:100%}，既实现了input上传文件按钮的隐藏，又可以点击整个td区域都能弹出上传窗口

JS部分

showIncon(file)方法：

function showIncon(file){
    var r= new FileReader();
    //由于jQuery对象没有 files 属性，此处要使用原生js获取，或者$("#file")[0].files;
    f = document.getElementById('file').files[0];
    //限制上传图片大小在2M以内，超过2M则显示默认图片，并清空input框的值
    if(f.size>2048000){
        alert( "请上传小于2M的图片");
        $("#iconTd").css("background-image","url('<%=basePath%>/static/images/niu.jpg')");
        file.value = "";
    }else{
        r.readAsDataURL(f);
        r.onload=function  (e) {
            $("#iconTd").css("background-image","url(" + this.result + ")");
        };
    }
}