html - 在文件对话框上显示已应用文件类型过滤器的自定义文本，以上传特定类别的文件

Question

下面将允许用户仅选择图像文件的指定类别。

<input id="file" type="file" name="file" size="30" 
       accept="image/jpg,image/png,image/jpeg,image/gif"
/>

但是，问题在于它将在文件对话框中显示“自定义文件”作为文件描述，这会使用户混淆应选择的文件类型。

我的问题是:是否有更好的方法可以将文本“自定义文件”修改为“图像文件”

注意:如果我提供的“image / *”在文件描述中显示“Image Files”，但我不想允许用户选择所有类型的图像文件，只想限制为指定的格式。

预先感谢您的意见。

Answer 1

简短的答案

如我所料，这是不可能。 <input type="file" />是 protected 程度最高的浏览器元素之一，因此也是周围适应性最差的浏览器元素之一。该浏览器之所以要非常谨慎地处理文件输入，是因为它们不想冒险让攻击者访问您的文件(即使看到您的文件夹结构也很糟糕)。

长答案

您可能无法自由更改在过滤器框中可见的文本，但还是有希望的。实际上，在某些情况下，可以选择显示的文本。一个很大的缺点是，这完全是，而不是与浏览器兼容的，并且可能不是与操作系统兼容的。

还有另一个原因为什么浏览器不允许编辑该文本可能是一个坏主意，它可能被用来误导用户(例如，像We're watching you或FATAL WINDOWS ERROR这样的文本可能会吓users用户)。此外，它不应该这样做，但可能会导致可能的利用，用户尝试在现场运行某种C代码，为他们提供计算机访问权限，并可能以灾难性的方式损害您的计算机。

上面我说过，可以更改可见的过滤器文本。下面，我将介绍一些我尝试过的方法，但是请不要犹豫，在我为测试目的而创建的这个Codepen上自己尝试一下:https://codepen.io/JohannesB/pen/vKGoyE

我没有测试过的其他文件类型的可能灵感(请随意编辑此帖子):https://stackoverflow.com/a/14839673/1493235

我认为可能会产生引人入胜的结果的文件接受参数选择:应用程序/ msword，应用程序/ rtf，应用程序/八位位组流，应用程序/八位位组exe，应用程序/ zip，文本/ css，文本/ html，文本/纯文字

值得注意的结论

所有三种浏览器在与image/*，video/*和audio/*关联的文件类型上不同

Internet Explorer是唯一了解Video/x-msvideo avi的浏览器

Firefox和chrome通过自定义过滤器文本了解Aplication/pdf，但IE不会。

Chrome是唯一了解Text/*并具有.exe的自定义文本标题的浏览器

在绝对没有浏览器中，自定义过滤器标题永远不会应用于组合接受输入。

未调查的路径

对于Flash上​​传者来说，此文本可能是可自定义的，但我对此表示高度怀疑。另外，不建议使用Flash，因此不值得尝试。

实验结果

免责声明:下面使用的示例在Windows 7计算机上运行，​​使用Internet Explorer v11.0.9600，Chrome v51.0.2704.84m和Firefox v46.0.1。我不能保证它们代表有关其他操作系统，其他浏览器版本甚至相同浏览器版本的正确信息。请谨慎使用此信息。

IE浏览器

音频/ *

应用程序/ *

应用程序/ pdf

图片/ *

文本/ *

视频/ *

视频/ x-msvideo avi

.exe

图片/ *，视频/ *

图片/*、.exe



Chrome

音频/ *

应用程序/ *

应用程序/ pdf

图片/ *

文本/ *

视频/ *

视频/ x-msvideo avi

.exe

图片/ *，视频/ *

图片/*、.exe



火狐浏览器

音频/ *

应用程序/ *

应用程序/ pdf

图片/ *

文本/ *

视频/ *

视频/ x-msvideo avi

.exe

图片/ *，视频/ *

图片/*、.exe