首先说明原理:
因为表单中input file
标签在不同的浏览器中样式不一致,且很难对其设置样式,所以我们的解决方案是用其它的标签去代替它,而它本身则不显示。这样就实现了间接显示样式。
```
<div>
<input type="button" value="自定义的按钮名" onclick="javascript:$('input[name=\'file\']').click();" />
<input name="fileName" readonly />
<input type="file" name="file" style="display: none;" onchange="javascript:$('input[name=\'fileName\']').val(this.files[0].name);" />
</div>
```
- 如上代码所示:
先隐藏选择文件按钮,点击自定义按钮时触发文件按钮onclick="javascript:$('input[name=\'file\']').click();"
,并在选中文件时onchange="javascript:$('input[name=\'fileName\']').val(this.files[0].name);"
将文件名赋值给自定义文件名显示标签fileName
,且设置为readonly
(只读)。