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 + ")");
- };
- }
- }
来源: https://www.2cto.com/kf/201806/753968.html