在做文件上传的时候,最破烦的就是文件选择按钮的默认样式,特别难看,还不容易修改。将这个按钮隐藏的方法有很多,我这里的方法的大概思路就是,在页面自定义一个按钮,点击这个按钮的时候启动选择文件事件。具体实现如下。
在页面上自定义一个按钮
<button class="select_file">选择文件</button>
后台js
$(function(){
var file; // 定义一个全局变量,为一个文本选择器。
file = $('<input type="file" />'); // 这样file就是jquery创建的一个文本选择器,但是因为我们并没有把它加载到页面山,所以是不可见的。
// button的单击事件
$('.select_file').click(function(){
// 启动文件选择
file.click();
});
// 选择好文件后,获取选择的内容
file.change(function(e){
var select_file = file[0].files[0];
})
})
原生js版
let input = document.createElement('input')
input.type = 'file'
input.click() // 开始选择文件
input.onchange = () => { // 监听选择文件的结果,获取选择到的文件
let file = input.files[0]
}
具体实现就是上面这样了,都应该明白是什么意思了,就是我创建一个文本选择器,但是不把它加载到页面上,在页面上重新定义一个按钮来使用它的点击事件,这样就实现了文本选择。