如何去掉input type=file中的选择文件_input file去掉选择文件按钮

使用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>							
							
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

		// 批量上传
		//通过点击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{  
                   
                   }
                 })
              }    
                   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

综上所述，对input样式修改不了，我们可以通过另外一种思路去解决问题，通过绝对定位，点击位于input上方的div，进一步绑定input，从而触发change事件，从而解决上述问题，如图所示：