场景，点选择文件，能在输入框显示所上传的文件名，第一想到的是原生的表单元素，如下：
- <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>
支付宝领红包