使用自定义文件选择按钮选择文件_var progressbarinput = document.createelement('inp-CSDN博客

本文链接：https://blog.csdn.net/weixin_42600599/article/details/92835358

博客围绕文件上传时文件选择按钮样式问题展开，介绍了将其隐藏并自定义按钮的方法。思路是创建文本选择器但不加载到页面，在页面重新定义按钮使用其点击事件，以此实现文本选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

在页面上自定义一个按钮

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