使用<inputtype=“file”>时限制文件格式?

使用<inputtype=“file”>时限制文件格式?

当用户单击“浏览”按钮时,我希望限制可以从本机OS文件选择器中选择的文件类型。<input type="file">元素在HTML中。我有种感觉这是不可能的,但我想知道一个解决办法。我只想保留HTML和JavaScript,请不要使用Flash。



烙印99
浏览 2126回答 3
3回答

慕桂英546537

输入标记有Accept属性。然而,它在任何方面都不可靠。浏览器很可能将其视为“建议”,这意味着用户也将根据文件管理器的不同,拥有只显示所需类型的预选。他们仍然可以选择“所有文件”,并上传任何他们想要的文件。例子:<form> &nbsp;&nbsp;<input&nbsp;type="file"&nbsp;name="pic"&nbsp;id="pic"&nbsp;accept="image/gif,&nbsp;image/jpeg"&nbsp;/></form>阅读更多内容HTML 5规范请记住,它仅用作用户查找正确文件的“帮助”。每个用户都可以向您的服务器发送他/她想要的任何请求。您总是必须验证所有服务器端。所以答案是:不你,你们不能限制但是你能,会,可以设定一个预选,但你不可能依靠它。另外,也可以通过使用JavaScript检查文件名(输入字段的值)来执行类似的操作,但这是胡说八道,因为它没有提供保护,也不方便用户选择。这只会让网站管理员以为他/她受到了保护,并打开了一个安全漏洞。对于具有替代文件扩展名(例如jpeg而不是jpg)、大写或没有任何文件扩展名(在Linux系统上是常见的)的用户来说,这可能是个麻烦。

子衿沉夜

您可以使用change事件,以监视用户选择的内容,并在此时通知他们该文件不可接受。它不限制所显示的文件的实际列表,但它是您可以做的最接近客户端的文件,除了不受支持的文件。accept属性。var file = document.getElementById('someId');file.onchange = function(e) {&nbsp; var ext = this.value.match(/\.([^\.]+)$/)[1];&nbsp; switch (ext) {&nbsp; &nbsp; case 'jpg':&nbsp; &nbsp; case 'bmp':&nbsp; &nbsp; case 'png':&nbsp; &nbsp; case 'tif':&nbsp; &nbsp; &nbsp; alert('Allowed');&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; alert('Not allowed');&nbsp; &nbsp; &nbsp; this.value = '';&nbsp; }};<input type="file" id="someId" />
打开App,查看更多内容
随时随地看视频慕课网APP