在文件对话框中显示应用的文件类型过滤器的自定义文本,以上传特定类别的文件。

36

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

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

然而,问题在于它会在文件对话框中显示“自定义文件”作为文件描述,这会让用户困惑应选择哪种类型的文件。

filedialogbottom

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

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

谢谢您提前的意见。

1个回答

57

简短回答

正如我所预料的那样,这是不可能的<input type="file" /> 是最受保护的浏览器元素之一,因此也是最不可适应的浏览器元素之一。浏览器如此小心地处理文件输入的原因是因为他们不想冒险让攻击者访问您的文件(即使只看到您的文件夹结构也很糟糕)。

详细回答

您可能无法自由更改过滤框中可见的文本,但仍有希望。实际上,在某些情况下,可以在某种程度上选择出现的文本。一个巨大的缺点是这完全不兼容浏览器,并且可能不兼容操作系统

浏览器不允许编辑该文本的另一个原因是它可能会误导用户(例如像我们正在观察您致命的Windows错误这样的文本可能会吓唬用户)。

此外,它不应该,但可能会导致潜在的漏洞,其中用户尝试在字段中运行某种C代码(例如通过尝试触发一些越界写入),授予他们机器访问权限,可能以灾难性的方式损害您的计算机。大多数浏览器通过调用本地操作系统函数或ABI来实现打开文件窗口,因此需要额外小心,因为这些ABI调用的实例可能会导致沙盒逃逸和/或内核漏洞利用。通常最好尽可能远离内核调用的用户输入,这正是浏览器供应商在这种情况下所做的(例如在火狐源代码中硬编码硬编码谷歌源代码中)。

上面我提到过可以在可见的筛选文本中进行一些修改。下面我将介绍一些我尝试过的方法,但请不要犹豫,可以在我为测试目的创建的这个codepen上自己尝试:https://codepen.io/JohannesB/pen/vKGoyE 其他未经测试的文件类型的可能灵感(请随意编辑此帖子):https://dev59.com/eXVC5IYBdhLWcg3wykej#14839673 我认为以下文件接受参数的选择可能会产生有趣的结果:application/msword,application/rtf,application/octet-stream,application/octet-stream exe,application/zip,text/css,text/html,text/plain

值得注意的结论

  • 所有三个浏览器在与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 Audio/*

应用程序/*

IE Application/*

应用程序/pdf

IE Application/pdf

图像/*

IE Image/*

文本/*

IE Text/*

视频/*

IE Video/*

视频/x-msvideo avi

IE Video/x-msvideo avi

.exe

IE .exe

图像/*,视频/*

IE Image/, Video/

图像/*,.exe

IE Image/*, .exe


Chrome

音频/*

Chrome Audio/*

应用程序/*

Chrome Application/*

应用程序/pdf

Chrome Application/pdf

图像/*

Chrome Image/*

文本/*

Chrome Text/*

视频/*

Chrome Video/*

视频/x-msvideo avi

Chrome Video/x-msvideo avi

.exe

Chrome .exe

图像/*,视频/*

Chrome Image/, Video/

图像/*,.exe

Chrome Image/*, .exe


火狐浏览器

音频/*

Mozilla Firefox Audio/*

应用程序/*

Mozilla Firefox Application/*

应用程序/pdf

Mozilla Firefox Application/pdf

图像/*

Mozilla Firefox Image/*

文本/*

Mozilla Firefox Text/*

视频/*

Mozilla Firefox Video/*

视频/x-msvideo avi

Mozilla Firefox Video/x-msvideo avi

.exe

Mozilla Firefox .exe

图像/*,视频/*

Mozilla Firefox Image/, Video/

图像/*,.exe

Mozilla Firefox Image/*, .exe


2
非常深入的研究,对于像我这样处境困难的人确实很有帮助。非常感谢您的分享! - dhruvpatel

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接