javascript - Restrict File Types In File Upload Dialog - Stack Overflow

admin管理员组

文章数量:1333450

I am building an application in HTML5 and I need a file uploader that is able to filter the various files.

Say I got a folder with 1000 files and 5 of those have the .xls format. I want the upload window to filter those files once that file type is selected in the upload window its MIME type chooser.

I know that HTML5 has a way to do this with <input type=file accept=jpg/images> but due to its lack of support (none in IE and Safari) it is just not an option.

I have been looking around the web and found a jQuery file uploader but from what I can see, it is only able to check for file types once you hit the upload button which does not help filter the files available.

Is there any way to do this using Flash or HTML5 technology?

I am building an application in HTML5 and I need a file uploader that is able to filter the various files.

Say I got a folder with 1000 files and 5 of those have the .xls format. I want the upload window to filter those files once that file type is selected in the upload window its MIME type chooser.

I know that HTML5 has a way to do this with <input type=file accept=jpg/images> but due to its lack of support (none in IE and Safari) it is just not an option.

I have been looking around the web and found a jQuery file uploader but from what I can see, it is only able to check for file types once you hit the upload button which does not help filter the files available.

Is there any way to do this using Flash or HTML5 technology?

• javascript
• flash
• html
• file-upload

Share Improve this question Follow edited Sep 26, 2012 at 9:52 user2428118 8,12444 gold badges4646 silver badges7373 bronze badges asked Sep 26, 2012 at 9:33 user1622621user1622621 4311 silver badge55 bronze badges 3

• The accept is not really HTML5, but HTML 4.01: w3/TR/html401/interact/forms#h-17.4 – feeela Commented Sep 26, 2012 at 9:55
• Thanks for the useful reply. And on a sidenote, where did i mention that accept originated from html5? – user1622621 Commented Sep 26, 2012 at 9:59
• Well, in your question obviously: "that HTML5 has a way to do this with <input type=file accept=jpg/images>" – feeela Commented Sep 26, 2012 at 10:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

If you want to use accept attribute you should set there correct mime types: accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp,image/tiff" That is for images. But it does not work in IE and some problems could be with FF (people say that it supports only a part of mime types)

For similar task I'm using SWFUpload. You can specify a list of allowed files there and it will show only those files in open file dialog. Here you can see its demos

Upd: as mentioned by @Nis, demos are now included into source package:

We have provided several simple demos to show how SWFUpload works. These demos are not intended as project templates but as demonstrations of basic features and methods for implementing SWFUpload. They are included in the source package.

本文标签： javascriptRestrict File Types In File Upload DialogStack Overflow