场景，点选择文件，能在输入框显示所上传的文件名，第一想到的是原生的表单元素，如下：
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function() { $("#wenjian").change(function() { $("#text").val($("#wenjian").val());
});
$("#browser").click(function() { $("#wenjian").click();
});
});
</script>
<input type="text" id="text" />
<input type="file" id="wenjian" class="file" style="display: none;" />
<input type='button' class='btn' value=' 浏览...' id="browser" />原生文件输入框“选择文件”按钮后会显示“未选择任何文件”等的文字，这因浏览器而异。于是只能隐藏而使用额外按钮去调用上传文件按钮，原生上传按钮隐藏，以上为 jq 版本，下方为 js 版本。
<div class="button operating-button" id="fileUpdate-button"> 从 Excel 中批量导入 </div>
<form action="" id ="fileUpdate-form">
<input type="file" name="filename" id="fileUpdate-input" style="display: none" />
</form>
<script type="text/javascript">
// 上传文件处理
var fileUpdate_button = document.getElementById("fileUpdate-button");
var fileUpdate_input = document.getElementById("fileUpdate-input");
var fileUpdate_form = document.getElementById("fileUpdate-form");
fileUpdate_button.onclick = function () { fileUpdate_input.click();
}
fileUpdate_input.onchange = function () { fileUpdate_form.submit();
}
</script>另一种，通过 CSS 控制，让文件输入框隐藏，但是作用范围变大，即隐藏在文本输入框与按钮下
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 定义 input type="file" 的样式 </title>
<style type="text/css">
body {font-size: 14px;}
input {
vertical-align: middle;
margin: 0;
padding: 0
}
.file-box {
position: relative;
width: 340px
}
.txt {
height: 22px;
border: 1px solid #cdcdcd;
width: 180px;
}
.btn {
background-color: #FFF;
border: 1px solid #CDCDCD;
height: 24px;
width: 70px;
}
.file {
position: absolute;
top: 0;
right: 80px;
height: 24px;
filter: alpha(opacity:0);
opacity: 0;
width: 260px
}
</style>
</head>
<body>
<div class="file-box">
<form action="" method="post" enctype="multipart/form-data">
<input type='text' name='textfield' id='textfield' class='txt' />
<input type='button' class='btn' value=' 浏览...' />
<input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
<input type="submit" name="submit" class="btn" value=" 上传 " />
</form>
</div>
</body>
支付宝领红包