<div class="file-box"><input type="button" class="btn" value="选择文件" /><inputtype="file"class="file"id="upimg"@change="previewFiles"multiple/></div><!-- Vue就直接用@change="previewFiles"读取文件回调 --!>
// vue读取
function previewFiles(e){console.log(e.target.files)
}// 原生监听
var upimg = document.getElementById('upimg');upimg.addEventListener('change', function(e){// 多文件console.log(e.target.files)// 单文件// console.log(e.target.files[0])}, false);.btn,
.file {// display: block;position: absolute;width: 75px;height: 35px;color: #fff;border-radius: 4px;border-color: #409eff;
}.btn {z-index: 2;background: #409eff; /* #66b1ff 409eff */pointer-events: none; /* 让事件传递到下一层,即: btn的层级比file高,但btn能触发file的事件 */
}
.file {z-index: 1;
}
用button覆盖input,也就是buttton的z-index层级比input高,最重要的一步是给button添加"pointer-events: none;" 属性, 把事件传递到下一层,即button可以触发input的事件
