html上传表单属性

Posted 2023-03-09

<from action="" enctype="multipart/from-data" method="post">
<input type="file" name="file3"/>
</from>
为什么出来的效果是这样
别人出来的是

表单的文件上传元素默认样式确实是：

只是这样并不美观，于是常见做法是创建一个文本框和一个按钮来配合文件上传元素：

核心就是将上传元素的透明度设置为0，即完全透明，然后绝对定位到按钮上上面，这样用户点击按钮时，实际是点击到上传元素。然后添加js，将上传元素的value值 赋给文本框的value值，实现在文本框中显示文件元素的value属性值。

该上传元素的onchange事件监听函数为：onchange="document.getElementById('textfield').value=this.value"

参考技术A <input type='button' text='选择文件'>