自定义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(只读)。