使用自定义文件选择按钮选择文件

在做文件上传的时候，最破烦的就是文件选择按钮的默认样式，特别难看，还不容易修改。将这个按钮隐藏的方法有很多，我这里的方法的大概思路就是，在页面自定义一个按钮，点击这个按钮的时候启动选择文件事件。具体实现如下。

在页面上自定义一个按钮

<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]
}

具体实现就是上面这样了，都应该明白是什么意思了，就是我创建一个文本选择器，但是不把它加载到页面上，在页面上重新定义一个按钮来使用它的点击事件，这样就实现了文本选择。

@快乐是一切