使用input type=file时,发现总是有个默认的选择文件,如图所示:
对其进行样式修改发现,其默认的样式就是这样,并不能通过css样式进行修改。既然修改不了,我们为什么不换另一种思路对其进行解决?这里我们通过position:absolute
绝对定位对其进行解决,思路是通过一个div绝对定位,位于input上方,通过对div的点击,进而监听触发input事件,从而解决去掉选择文件(这里其实是隐藏,设置visibility:hidden)。
直接上代码:
<!-- 中心上传按钮@click='batchUpload' -->
<input type="file" id="batchUpload" name="files"
accept="image/jpg, image/gif,image/png, image/jpeg"
multiple="multiple"
>
<div @click="centerUploadBox" class="centerUploadBox">
<p class="centerUpload">批量上传</p>
</div>
<style>
/* 中心上传input */
#batchUpload {
width: 60px;
height: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -30px;
margin-top: -10px;
}
.centerUploadBox {
cursor: pointer;
background: url('../../static/centerUpload.png') no-repeat;
width: 110px;
height: 110px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -55px;
margin-top: -55px;
text-align: center;
}
</style>
// 批量上传
//通过点击div,对input进行绑定change事件,进而点击div盒子时,可以触发input
centerUploadBox() {
var me = this;
var batchUpload = document.querySelector('#batchUpload');
batchUpload.click();
var filesList = document.querySelector('#batchUpload').files;
batchUpload.addEventListener('change', function () {
var filesList = document.querySelector('#batchUpload').files;
if(filesList.length==0){
return;
}else{
}
})
}
综上所述,对input样式修改不了,我们可以通过另外一种思路去解决问题,通过绝对定位,点击位于input上方的div,进一步绑定input,从而触发change事件,从而解决上述问题,如图所示: