HTML input file控件限制上传文件类型_动力节点Java学院整理

网页上添加一个input file HTML控件： &lt;input id="File1" type="file" /&gt; 默认是这样的，所有文件类型都会显示出来，如果想限制它只显示我们设定的文件类型呢，比如“word“,”excel“,”pdf“文件　 解决办法是可以给它添加一个accept属性，比如：   &lt;input id="File1" type="file" accept=".xls,.doc,.txt,.pdf" /&gt; 这样选择的时候默认会显示为这样： 文件选择框内只显示出你自定义文件类型的文件，也还比较方便。 不过这只是最简单的掩人耳目的做法，还是能选择其它文件类型： 在HTML中，`<input type="file">`控件用于让用户选择本地文件进行上传。默认情况下，这个控件允许用户选择任何类型的文件。然而，在某些场景下，我们可能希望限制用户只能选择特定类型的文件，例如Word文档、Excel表格或PDF文件。这可以通过设置`accept`属性来实现。 在HTML代码中，我们可以这样修改`<input type="file">`控件： ```html <input id="File1" type="file" accept=".xls,.doc,.txt,.pdf" /> ``` `accept`属性值是一个逗号分隔的MIME类型列表或文件扩展名列表。在上面的例子中，`.xls`对应Excel文件，`.doc`对应Word文档，`.txt`对应纯文本文件，`.pdf`对应PDF文件。设置这个属性后，当用户打开文件选择对话框时，系统会默认显示这些指定类型的文件，但这并不意味着用户无法选择其他类型的文件。用户仍然可以手动浏览并选择不受限制的文件。 为了实现真正的文件类型限制，防止用户上传非指定类型的文件，通常需要结合客户端（JavaScript）和服务器端的验证。在客户端，JavaScript可以通过监听`input`事件来检查选定文件的`type`或`name`属性，确保它们符合预期。例如： ```javascript document.getElementById('File1').addEventListener('change', function(event) { var files = event.target.files; for (var i = 0; i < files.length; i++) { var file = files[i]; var allowedTypes = ['application/vnd.ms-excel', 'application/msword', 'text/plain', 'application/pdf']; if (!allowedTypes.includes(file.type)) { alert('请仅选择Word、Excel、文本或PDF文件'); event.target.value = ''; break; } } }); ``` 在服务器端，同样需要对上传的文件进行验证。这是因为客户端验证可以被绕过，所以服务器端的验证是必要的安全措施。根据文件的MIME类型或扩展名，服务器可以拒绝不符合条件的文件上传。 此外，这里列举了一些常见的文件类型及其对应的MIME类型： - `.3gpp` - `audio/3gpp` 或 `video/3gpp` - 3GPP音频/视频 - `.ac3` - `audio/ac3` - AC3音频 - `.asf` - `application/vnd.ms-asf` - 高级流格式 - `.au` - `audio/basic` - AU音频 - `.css` - `text/css` - 层叠样式表 - `.csv` - `text/csv` - 逗号分隔值 - `.doc` - `application/msword` - Microsoft Word文档 - `.dot` - `application/msword` - Microsoft Word模板 - `.dtd` - `application/xml-dtd` - 文档类型定义 - `.dwg` - `image/vnd.dwg` - AutoCAD绘图数据库 - `.dxf` - `image/vnd.dxf` - AutoCAD绘图交换格式 - `.gif` - `image/gif` - 图形交换格式 - `.htm` 和 `.html` - `text/html` - 超文本标记语言 - `.jp2` - `image/jp2` - JPEG-2000 - `.jpe`, `.jpeg`, `.jpg` - `image/jpeg` - JPEG图像 - `.js` - `text/javascript`, `application/javascript` - JavaScript - `.json` - `application/json` - JSON（JavaScript对象表示法） - `.mp2`, `.mp3` - `audio/mpeg` - MPEG音频 - `.mp4` - `audio/mp4`, `video/mp4` - MPEG-4音频/视频 - `.mpeg` - `video/mpeg` - MPEG视频流 - `.mpg` - `video/mpeg` - MPEG视频流 - `.mpp` - `application/vnd.ms-project` - Microsoft Project项目 - `.ogg` - `application/ogg`, `audio/ogg` - Ogg Vorbis - `.pdf` - `application/pdf` - 可移植文档格式 - `.png` - `image/png` - 可移植网络图形 - `.pot`, `.pps`, `.ppt` - `application/vnd.ms-powerpoint` - Microsoft PowerPoint模板、幻灯片和演示文稿 - `.rtf` - `application/rtf`, `text/rtf` - 富文本格式 - `.svf` - `image/vnd.svf` - 简单向量格式 - `.tif` 和 `.tiff` - `image/tiff` - 标注图像文件格式 - `.txt` - `text/plain` - 纯文本 - `.wav` - `audio/wav` - WAV音频 请注意，虽然这些MIME类型和扩展名可以用来限制`<input type="file">`控件，但安全性和用户体验都要求同时在客户端和服务器端进行验证。