How to make <input type=“file”/> accept only

2019-01-21 22:06发布

站内问答 / Html5
1680 7 4

I want my uploader only allows these types:

  • doc, docx.
  • xls, xlsx.
  • ppt, pptx.
  • txt.
  • pdf.
  • Image types.

How can I achieve this? What should I put in the accept attribute? Thanks for your help.

EDIT!!!

I have one more thing to ask. When the popup appears for use to choose file, at the down right corner, there is a drop down list contains all allow files. In my case, the list would be long. I see in the list, there is an option called All Supported Types. How can I make it chosen by default and eliminate all other options?

Any help will be appreciated. Thank you.

7条回答
霸刀☆藐视天下
2楼-- · 2019-01-21 22:09

IMPORTANT UPDATE:

Due to use of only application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint... allows only till 2003 MS products, and not newest. I've found this:

application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.slideshow, application/vnd.openxmlformats-officedocument.presentationml.presentation

And that includes the new ones. For other files, you can retrieve the MIME TYPE in your file by this way (pardon the lang)(in MIME list types, there aren't this ones):

enter image description here

You can select & copy the type of content

查看更多
0人赞 添加讨论(0) 举报
小情绪 Triste *
3楼-- · 2019-01-21 22:12

for powerpoint and pdf files: 

<html>
<input type="file" placeholder="Do you have a .ppt?" name="pptfile" id="pptfile" accept="application/pdf,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.slideshow,application/vnd.openxmlformats-officedocument.presentationml.presentation"/>
</html>
查看更多
0人赞 添加讨论(0) 举报
小情绪 Triste *
4楼-- · 2019-01-21 22:16

Use Like below

<input type="file" accept=".xlsx,.xls,image/*,.doc, .docx,.ppt, .pptx,.txt,.pdf" />
查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
5楼-- · 2019-01-21 22:17

Use accept attribute with the MIME_type as values

<input type="file" accept="image/gif, image/jpeg" />
查看更多
0人赞 添加讨论(0) 举报
再贱就再见
6楼-- · 2019-01-21 22:18

for image write this

<input type=file accept="image/*">

For other, You can use the accept attribute on your form to suggest to the browser to restrict certain types. However, you'll want to re-validate in your server-side code to make sure. Never trust what the client sends you

查看更多
0人赞 添加讨论(0) 举报
闹够了就滚
7楼-- · 2019-01-21 22:21

As stated on w3schools:

audio/* - All sound files are accepted

video/* - All video files are accepted

image/* - All image files are accepted

MIME_type - A valid MIME type, with no parameters. Look at IANA MIME types for a complete list of standard MIME types

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)