自定义input File

首先说明原理:

因为表单中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(只读)。

猜你喜欢

转载自blog.csdn.net/qq_37742572/article/details/87286103