文件上传需服务器端校验文件类型、限制大小、存储非web目录、病毒扫描及记录信息。①校验文件内容而非扩展名；②限制文件大小；③存储至非web访问目录；④进行病毒扫描；⑤记录上传信息。其他常用input类型包括text、password、email、number、radio、checkbox、date、submit、reset、hidden。自定义文件上传样式可通过隐藏input、使用label触发、css美化及javascript显示文件名实现。
HTML的input标签种类繁多，它们各自承担着不同的数据输入任务。文件上传是其中一个重要的类型，它允许用户将本地文件传输到服务器。
实现文件上传，主要依赖于标签，结合表单的enctype="multipart/form-data"属性以及服务器端的处理。
文件上传的安全性问题：如何防范恶意文件？
立即学习“前端免费学习笔记（深入）”；
文件上传功能强大，但也伴随着安全风险。恶意用户可能会上传病毒、恶意脚本或其他有害文件，对服务器和用户造成威胁。所以，防范恶意文件至关重要。
首先，服务器端必须进行严格的文件类型校验。不能仅仅依赖客户端的校验，因为客户端校验很容易被绕过。服务器端应该根据文件的内容（比如文件头）来判断文件类型，而不是仅仅根据文件扩展名。
其次，要限制上传文件的大小。过大的文件可能会占用过多的服务器资源，甚至导致拒绝服务攻击。
再者，上传的文件应该存储在非Web可访问的目录中，避免直接通过URL访问。如果需要访问，应该通过服务器端脚本进行处理，并进行权限验证。
另外，可以对上传的文件进行病毒扫描。虽然不能保证100%的安全性，但可以大大降低风险。
最后，要记录上传文件的相关信息，比如上传时间、上传用户、文件类型等，以便追踪问题。
除了type="file"，input还有哪些常用的类型？
标签的类型非常丰富，除了type="file"之外，还有很多常用的类型，比如：
-
type="text"：用于单行文本输入，是最常用的类型。 -
type="password"：用于密码输入，输入的内容会被隐藏。 -
type="email"：用于邮箱地址输入，浏览器会自动验证邮箱格式。 -
type="number"：用于数字输入，可以设置最小值、最大值和步长。 -
type="radio"：用于单选按钮，一组单选按钮的name属性必须相同。 -
type="checkbox"：用于复选框，可以多选。 -
type="date"：用于日期选择，浏览器会提供一个日期选择器。 -
type="submit"：用于提交表单。 -
type="reset"：用于重置表单。 -
type="hidden"：用于隐藏字段，可以存储一些不需要显示给用户的信息。
这些类型可以满足各种不同的数据输入需求，开发者可以根据实际情况选择合适的类型。
如何自定义文件上传的样式？
默认的文件上传按钮样式比较简陋，很多时候我们需要自定义样式，让它更符合网站的整体风格。
一种常见的做法是隐藏默认的标签，然后使用label标签来触发文件选择对话框。label标签的for属性需要和input标签的id属性相同。
然后，可以使用CSS来美化label标签的样式，比如设置背景颜色、字体、边框等。
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}这样，用户点击自定义的label标签，就可以触发文件选择对话框，而input type="file"标签本身是隐藏的。
此外，还可以使用JavaScript来监听input标签的change事件，当用户选择文件后，可以获取文件名，并显示在页面上。
const fileInput = document.getElementById('file-upload');
const fileNameSpan = document.getElementById('file-name');
fileInput.addEventListener('change', function() {
if (this.files && this.files.length > 0) {
fileNameSpan.textContent = this.files[0].name;
} else {
fileNameSpan.textContent = '';
}
});通过这种方式，可以实现高度自定义的文件上传样式，提升用户体验。
